vue.js之绑定class和style
一.绑定Class属性。
绑定数据用v-bind:命令,简写成:
语法:<div v-bind:class="{ active: isActive }"></div>。class后面的双引号里接受一个对象字面量/对象引用/数组作为参数,
这里,{active: isActive}是对象参数,active是class名,isActive是一个布尔值。下面是一个例子:
绑定对象字面量
html:
<div id="classBind">
<span :class="{warning:isWarning,safe:isSafe}" v-on:click="toggle">
状态:{{alert}}{{isSafe}}
</span>
</div>
//js
var app11=new Vue({
el:'#classBind',
data:{
isWarning:true,
alertList:['红色警报','警报解除'],
alert:''
},
computed:{
isSafe:function(){
return !this.isWarning;
}
},
methods:{
toggle:function(){
this.isWarning=!this.isWarning;
this.alert= this.isWarning?this.alertList[0]:this.alertList[1];
}
} });
css:
.warning{
color:#f24;
}
.safe{
color:#42b983;
}
当点击状态文字时,可以切换后面的文字和颜色
//状态:警报解除true
//状态:红色警报false
绑定对象引用
这里绑定的对象可以写到Vue实例的data里面,而在class="classObj ",双引号中的class是对Vue实例中classObj对象的引用。classObj可以放在data中或者computed中,如果在computed中,则classObj所对应的函数必须返回一个对象如下:
js:
var app11=new Vue({
el:'#classBind',
data:{
isWarning:true,
alertList:['红色警报','警报解除'],
alert:''
},
computed: {
isSafe: function () {
return !this.isWarning;
},
classObj:function(){
return {
warning: this.isWarning,
safe:this.isSafe
}
}
},
methods:{
toggle:function(){
this.isWarning=!this.isWarning;
this.alert= this.isWarning?this.alertList[0]:this.alertList[1];
}
} });
绑定数组
html:
<div v-bind:class="classArray" @click="removeClass()">去掉class</div>
js
data: {
classArray:["big",'red']
}
methods:{
removeClass:function(){
this.classArray.pop();
}
}
css:
.big{
font-size:2rem;
}
.red{
color:red;
}
效果,点击去掉class,会调用removeClass函数,去掉classArray数组的最后一项,第一次,去掉'red',字体颜色由红变黑,再点,去掉'big',字体变小。
二、绑定内联style
此时此刻,我一边看着本页旁边的那个Vue api文档学,一边到这里卖,装逼的感觉真爽o(^▽^)o
html
<div id="styleBind">
<span :style="{color:theColor,fontSize:theSize+'px'}" @click="bigger">styleBind</span>
</div>
css
这个不需要css。。。
js
var app12=new Vue({
el:'#styleBind',
data:{
theColor:'red',
theSize:14
},
methods:{
bigger:function(){
this.theSize+=2;
}
} });
除了传入对象字面量以外,也可以传入对象引用和数组给V-bind:style
vue.js之绑定class和style的更多相关文章
- vue.js样式绑定
vue.js样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 styl ...
- 10.Vue.js 样式绑定
Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处 ...
- Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- Vue.js双向绑定的实现原理
Vue.js最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究几乎所有Vue的开篇介绍都会提到的hello world双向绑定是怎样实现的.先讲涉及的知识点,再参考源码,用尽可能少 ...
- Vue.js双向绑定原理
Vue.js最核心的功能有两个,一个是响应式的数据绑定系统,另一个是组件系统.本文仅仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化的代码实现一个简单的hello world示例. 一.访问器属 ...
- vue.js双向绑定之--select获取text
在大多数情况下select下拉菜单都是value和text设置不同的值的,value一般来说是与后台交互的值,而text是前端用来显示的文本: 但是,vue.js对到表单的双向绑定时如果option设 ...
- Vue.js 样式绑定(1)
demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- vue.js中内联样式style三元表达式
<span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >搜索</span&g ...
- vue.js 样式绑定
简单用法 <div v-bind:height="bindStyle"> 复杂用法 <div v-bind:style="bindStyle" ...
随机推荐
- sqlite 管理软件
★SQLite的官方网站 http://www.sqlite.org/ ★SQLite的官方网址提供数据库查看软件:http://www.sqlite.org/cvstrac/wiki?p=Manag ...
- NSCopy&NSMutableCopy
struct student { int a; float f; char c; long l; }; struct person { int a; float f; char c; long l; ...
- Android添加图片到ListView或者 RecyclerView显示
先上图 点击+号就去选择图片 实际上这个添加本身就是一个ListView或者 RecyclerView 只是布局有些特殊 item <?xml version="1.0" e ...
- UIweib的简单实用
- 深入浅出React Native 3: 从零开始写一个Hello World
这是深入浅出React Native的第三篇文章. 1. 环境配置 2. 我的第一个应用 将index.ios.js中的代码全部删掉,为什么要删掉呢?因为我们准备从零开始写一个应用~学习技术最好的方式 ...
- SQL*Plus中替换变量与定义变量
替换变量 SQL*Plus中的替换变量又叫替代变量,它一般用来临时存储相关数据:在SQL语句之间传递值.一般使用&或&&前缀来指定替换变量. 关于使用替换变量,一般是利用其创建 ...
- Android:开发环境搭建相关问题
1.Android.ADT.SDK概念与关系 SDK:Software Development Kit,中文意思是“软件开发工具包”.这是一个覆盖面相当广泛的名词,可以这么说:辅助开发某一类软件的相关 ...
- 监控mysql各种选项
安装mysql之后,需要对mysql服务进行监控. nagios开源自带的check_mysql 对 mysql 的slave 机监控倒是不错.但是对数据库主机监控就略显不足了. 使用一个监控 ...
- 实时事件统计项目:优化flume:用file channel代替mem channel
背景:利用kafka+flume+morphline+solr做实时统计. solr从12月23号开始一直没有数据.查看日志发现,因为有一个同事加了一条格式错误的埋点数据,导致大量error. 据推断 ...
- springmvc和struts2的区别
springmvc和struts2的区别 1.springmvc基于方法开发的,struts2基于类开发的. 2.单例和多例的区别:springmvc在映射的时候,通过形参来接收参数的,是将url和c ...