Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue响应式渲染 - Vue2 Class和style
目录
Vue2 Class和style
动态切换class-对象
添加新类
如何解决方案
动态切换class-数组
增加类方式
动态切换style-对象
在data中设置变量
动态添加底层不支持
增加元素
动态添加样式
总结
Vue2 Class和style
引用Vue2版本在多个class之间切换。
动态切换class-对象
title1、title2、title3都是style中设置的类，
在vue的data中定义一个变量，
来对div进行类的批量赋值。
示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .title1 { color:red; } .title2 { font-weight: bold; } .title3 { background: #ccc; } </style> <script src="../lib/vue.js"></script> </head> <body> <div id="box"> <div :class="classobj">动态切换class-1-对象</div> </div> <script> let vm = new Vue({ el:'#box', data:{ classobj: { title1:true, title2:true, title3:false, } } }) </script> </body> </html>
添加新类
在控制台通过定义的vm添加新的类。
示例如下：
后期(临时)添加的类，不会拦截，无法侦听到。
示例如下：
如何解决方案
Vue2 Vue.set(目标对象，属性，true)
Vue3 支持动态增加属性的拦截。
动态切换class-数组
使用数组方式动态切换div的class，示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .title1 { color: red; } .title2 { font-weight: bold; } .title3 { background: #ccc; } .title4 { border: 2px solid #000; } </style> <script src="../lib/vue.js"></script> </head> <body> <div id="box"> <div :class="classobj">动态切换class-1-对象</div> <div :class="classarr">动态切换class-2-数组</div> </div> <script> var vm = new Vue({ el: '#box', data: { classobj: { title1: true, title2: true, title3: false, }, classarr: ["title1", "title4"] } }) </script> </body> </html>
增加类方式
这时想新增一个类，如果操作，示例如下：
动态切换style-对象
通过vue动态绑定div的行内样式，就可以通过对象方式动态切换style。
示例如下：
<div :style="styleobj">动态切换style-1-对象</div>
在data中设置变量
设置styleobj变量，使用对象方式，在其中设置属性时需注意使用驼峰语法，
示例如下：
styleobj: { backgroundColor:'blue' }
动态添加底层不支持
Vue2 解决方案
使用Vue.set(vm.styleobj, "fontSize", "30px")
示例如下：
增加元素
在页面增加div。示例如下：
<div :style="stylearr">动态切换style-2-数组</div>
在data中设置变量，如下：
动态添加样式
vm.stylearr.push({fontSize:"30px"})
总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue响应式渲染 - Vue2 Class和style
