一, 对象语法绑定 class 属性
class 的属性代码如下
- <style type="text/CSS">
- .red{
- color: red;
- width: 100px;
- height: 100px;
- border: 2px;
- border-color: blue;
- border-style: solid;
- }
- </style>
1, 用之前的方法绑定一下 class 属性
<div class="red">11111111111</div>
2, 使用 v-bind 的方式, 绑定一个字符串
- <!-- 绑定的方式 1, 写一个字符串 -->
- <div v-bind:class="'red'">22222222222222</div>
3, 使用 v-bind 的方式, 绑定一个属性
- <!-- 绑定的方式 2, 写一个属性 -->
- <div v-bind:class="cls">3333333333333</div>
4, 使用 v-bind 的方式, 绑定一个对象
- <!-- 绑定的方式 3, 写一个对象, 当 isred 为 true, 则加上这个类, 如果 isred 为 false, 则不加这个类 -->
- <div v-bind:class="{red:isRed}">444444444444444</div>
这里还需要在 vue 对象中定义 isRed 这个属性
5, 使用 v-bind 的方式, 绑定一个计算属性
- <!-- 绑定的方式 4, 写一个计算属性的 get 方法 -->
- <div v-bind:class="classObj">55555555555</div>
还需要定义一个 get 方式的计算属性
二, 数组语法绑定 class 属性
先看 CSS 的 class 属性
- <style type="text/css">
- .red{
- color: red;
- width: 200px;
- height: 200px;
- border: 2px;
- border-color: blue;
- border-style: solid;
- }
- .bg{
- background-color: yellow;
- }
- </style>
1, 使用 v-bind 的方式, 绑定一个数组模式的 class 属性
<div v-bind:class="[class1,class2]">22222222</div>
当然我们还需要在 vue 实例中定义这 2 个属性的值
2, 使用 v-bind 绑定一个三元运算符
<div v-bind:class="[isActive?class1:class2]">3333333</div>
当然我们还需要在 vue 实例中定义 isActive 这个属性, 如果该属性为真, 则添加 class1 对应的 class 样式, 如果该属性为 false, 则添加 class2 对应的 class 样式
3, 还可以在数组中写一个对象, 同样使用 v-bind 语法
<div v-bind:class="[{'bg':isActive},class1]">44444444</div>
如果 isActive 为真, 则添加 bg 这个 class 属性, 所以我们需要在 vue 的实例对象中定义 isActive 这个属性
4, 同样这里也可以写一个计算属性
<div v-bind:class="classComputed">555555</div>
同样看下计算属性这个方法是怎么写的
5, 直接绑定一个属性
<div v-bind:class="classobj">6666666</div>
同样需要定义一个属性
三, 绑定 html 到组件上
先写一个组件
- Vue.component('tou', {
- template: `<div>
- <input type="button" value="弹出" v-on:click="alertfunction">
- <div > 内容区域 </div>
- </div>`,
- // 这里就是头部组件中的代码
- methods:{
- alertfunction:function(){
- alert(123);
- }
- }
- })
然后使用这个组件
- <div id="app">
- <tou v-bind:class="classobj"></tou>
- </div>
最后我们定义 classobj 这个对象
如果我们给组件添加 class 属性, 是把 class 属性添加到组件的根元素上, 且是追加的方式添加 class 属性, 不会被覆盖原有的属性
根元素就是 div 标签
来源: http://www.bubuko.com/infodetail-2995583.html