vue class与style绑定

介绍

元素的class和style属于attribute，所以可以用v-bind处理。而在v-bind用于classhestyle时，vue.js专门增强了一下，接受的表达式结果除了字符串，还要数组和对象。

绑定class

字符串语法：

<div  v-for="(item, index) in list" :class="'demo' + index"></div><div v-for="(item, index) in lists"><i :class="item.icon"></i>
</div>data () {return {list: [],lists: [{ icon: 'icon-like' },{ icon: 'icon-new' },{ icon: 'icon-share' }]}
}

对象语法：

//对象表达式
<div  class="demo" :class="{'demo-red': isActive, 'demo-green': !isActive}"></div>data () {return {isActive: true,}
}

//绑定一个数据中的对象
<div  class="demo" :class="demoClassInfo"></div>data () {return {isActive: true,demoClassInfo: {'demo-red': isActive,'demo-green': !isActive}}
}

//绑定一个计算属性
<div  class="demo" :class="demoClassInfo"></div>data () {return {count: 0,}
}
cmputed: {demoClassInfo() {return  {'demo-green': count > 0 && count <= 100  ? true :  false,'demo-red': count > 100 ? true :  false,}}
}

数组语法：

//三元表达式
<div  class="demo" :class="[ isActive ? 'demo-red' : 'demo-green' ]"></div>data () {return {isActive: true,}
}

<div  class="demo" :class="[demoClass1, demoClass2]"></div>data () {return {demoClass1: 'demo-color',demoClass2: 'demo-size',}
}

<div  class="demo" :class="demoClassList"></div>data () {return {demoClassList: [ 'demo-color', 'demo-size'],}
}

//绑定一个计算属性
<div  class="demo" :class="demoClassInfo"></div>data () {return {count: 0,}
}
cmputed: {demoClassInfo() {return  [count > 0 && count <= 100  ? 'demo-green' : '',count > 100 ? 'demo-red' : '']}
}

绑定style

css语法可以使用驼峰式（camelCase）、短横分隔命名(kabab-case)

对象语法：

<div  class="demo" :style="color: demoColor, fontSize: demoFontSize / 100 + ''rem'"></div>data () {return {demoColor: 'red',fontSize: 24}
}

<div  class="demo" :style="demoStyleInfo"></div>data () {return {demoStyleInfo:  {demoColor: 'red',fontSize: '0.24rem'}}
}

数组语法：

<div  class="demo" :style="[demoColor, demoSize]"></div>data () {return {demoStyleInfo:  {demoColor: 'color: red',demoSize: 'fontSize: 0.24rem'}}
}

vue class与style绑定相关推荐

6.Vue Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是 attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易 ...
vue Class 与 Style 绑定
1. Class 绑定 1.1 对象语法普通对象单个类 <div v-bind:class="{ active: isActive }"></div> ...
Vue - class与style绑定
1.通过v-bind绑定一个class A:直接绑定 B:通过v-bind绑定一个对象 C:绑定一个返回对象的计算属性 D:绑定一个数组对象 2.绑定内联样式 A:直接子啊属性名上面绑定 B:绑定到一 ...
Vue-关于内联样式style绑定
原本准备把style绑定和class绑定写在一起的,但我还是分开了,对class绑定不太清楚的伙伴也可以先去看看上篇Vue-关于class绑定(基础学习)_绍昆ya的博客-CSDN博客关于内联样式s ...
Vue.js Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将 ...
vue html绑定数组,VueJs Class 与 Style 绑定数组语法
应用介绍操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因 ...
vue清除绑定的class_vue 的 class 和 style 绑定的方法【05】
学习要点:1.绑定 class 2.绑定 style 本节课我们来开始学习 Vue 的 class 和 style 绑定的方法. 一．绑定 class 1. v-bind:class 不但可以设置 c ...
Vue中计算属性与class,style绑定
var vm=new Vue({ el:'#app', data:{ a:2, }, computed:{ //这里的b是计算属性:默认getter b:{ get:function(){ retur ...
Vue.2.0.5-Class 与 Style 绑定
Class 与 Style 绑定数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...

vue class与style绑定

介绍

绑定class

绑定style

vue class与style绑定相关推荐

最新文章

热门文章