vue学习笔记3： 动态绑定
一、知识点
动态绑定：
vue-class：
- 三目写法
- 对象写法
- 数组写法
vue-style:
- 三目写法
- 对象写法
- 数组写法
二、代码示例
1. vue-class
vue-class三目写法
<head> <meta charset="utf-8"> <script src="./js/vue.js"></script><!-- 引入vue.js --> <style> .red { background: red; /* isActive为true时的样式 */ } .yellow { background: yellow; /* isActive为false时的样式 */ } </style> <body> <div id="div1"> <!-- 视图层新建一个div --> <div :class="isActive?'red':'yellow'">动态绑定class-三目写法</div> <!-- 当isActive为true时，背景为red，否则为yellow --> <button @click="handleclick()">切换</button> <!-- 通过点击按钮改变isActive的值 --> </div> <script> var vm = new Vue({ el: '#div1', //绑定视图层的id data: { isActive: true //isActive初始值为true }, methods: { handleclick() { this.isActive = !this.isActive //改变isActive的值，true变false，false变true } } }) </script> </body>
运行结果：
点击切换按钮效果：
vue-class对象写法
管理多个class时，只需要通过class的属性值为true或false即可
<body> <div id="div1"> <!-- 视图层新建一个div --> <div :class="classobj">动态绑定class-对象写法</div> </div> <script> var vm = new Vue({ el: '#div1', //绑定视图层的id data: { classobj: { a: true, b: true, }, } }) </script </body>
运行结果：
我们可以看出a和b为true时，a，b类都用上了
当我们在浏览器控制台把a改为false
运行结果如下：
class中只有b了，所以可以通过对想法快速管理我们的类
vue-class数组写法
<body> <div id="div1"> <!-- 视图层新建一个div --> <div :class="classarr">动态绑定class-数组写法</div> </div> <script> var vm = new Vue({ el: '#div1', //绑定视图层的id data: { classarr:["a","b"], } }) </script </body>
运行结果：
如果想管理类直接对数组进行操作就行
对数组执行删除操作（删掉b）
操作后结果：
对数组执行新增操作（新增c）
操作后结果：
刚才通过vue-class对三目写法，对象写法，数组写法进行了一个详细的讲解，相信大家对他们也有了一定的了解，由于原理相同，vue-style我们直接上代码
2. vue-style
vue-style三目写法
<body> <div id="div1"> <!-- 视图层新建一个div --> <div :style="'background:'+(isActive?'red':'yellow')">动态绑定style-三目写法</div> <!-- isActive为true时，背景色为red，否则为yellow --> <button @click="handleclick()">切换</button> </div> <script> var vm = new Vue({ el: '#div1', //绑定视图层的id data: { isActive: true, //isActive初值值为true }, methods: { handleclick() { this.isActive = !this.isActive //通过点击改变isActive的值 } } }) </script> </body>
vue-style对象写法
<body> <div id="div1"> <!-- 视图层新建一个div --> <div :style="styleobj">动态绑定style-对象写法</div> </div> <script> var vm = new Vue({ el: '#div1', //绑定视图层的id data: { styleobj: { background: 'red' //把背景色设为红色 }, } }) </script> </body>
vue-style数组写法
<body> <div id="div1"> <!-- 视图层新建一个div --> <div :style="stylearr">动态绑定style-数组写法</div> </div> <script> var vm = new Vue({ el: '#div1', //绑定视图层的id data: { stylearr:[ {background:"yellow"} //背景色为黄色 ] } }) </script> </body>
