Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue响应式渲染 - Vue3 Class和style
目录
Vue3 class和style
初始化方式
初始化方式修改
动态切换class-对象写法
设置元素
设置变量
后期动态添加属性
总结
Vue3 class和style
引用Vue3版本在多个class之间切换
初始化方式
使用Vue3版本的，Vue初始化方式与2不同。
示例如下：
<!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.next.js"></script>
</head>
<body><div id="box">{{10+20}}</div><script>Vue.createApp().mount("#box")</script>
</body>
</html>
初始化方式修改
Data设置改为函数式设置（为了保护组件间变量命名不冲突）。
示例如下：
javascript">let obj = {data() {return {myname:'张三'}},methods:{}
}
Vue.createApp(obj).mount("#box")动态切换class-对象写法
设置元素
在box的盒子中设置一个动态绑定类的div，示例如下：
<div id="box"><div :class="classobj" @click="handleAdd()">动态切换class-对象写法</div>
</div>
设置变量
使用函数式
javascript">let obj = {data() {return {myname:'张三',classobj: {title1:true,title2:true,title3:false,}}},
后期动态添加属性
在div上增加一个点击事件，点击动态添加一个类。示例如下：
<div id="box"><div :class="classobj" @click="handleAdd()">动态切换class-对象写法</div>
</div><script>let obj = {data() {return {myname:'张三',classobj: {title1:true,title2:true,title3:false,}}},methods:{handleAdd() {this.classobj.title4 = true}}}Vue.createApp(obj).mount("#box")
</script>总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue响应式渲染 - Vue3 Class和style
