当前第2页 返回上一页
html
1 | <p v-bind:class="{ 'active': isActive, 'text-danger': hasError }"></p>
|
js
1 2 3 4 5 6 7 | data: {
isActive: false,
hasError: true
}
|
数组语法
html
1 | <p v-bind:class="\[isActive ? activeClass : '', errorClass\]"></p>
|
js
1 2 3 4 5 6 7 8 9 10 | data: {
isActive: false,
hasError: true,
activeClass: 'active',
errorClass: 'text-danger'
}
|
只需要动态改变isActive和hasError的值，就可以实现p的绑定不同的class和去掉绑定
2、vue中可以通过对象语法和数组语法来修改style
对象语法
html
1 | <p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></p>
|
js
1 2 3 4 5 6 7 | data: {
activeColor: 'red',
fontSize: 30
}
|
数组语法
html
1 | <p v-bind:style="\[styleColor, styleSize\]"></p>
|
js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | data: {
styleColor: {
color: 'red'
},
styleSize:{
fontSize:'23px'
}
}
|
只要改变data中的变量styleColor和styleSize，就可以动态修改p的style了。
相关学习推荐：编程视频
以上就是在VUE style中使用data中的变量的方法详解的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
js和vue的关系是什么
vue中的样式绑定详解
vue路由跳转的三种方式是什么
layui是基于vue的吗？
vue配什么ui框架比较好
vue组件中如何引入css文件
.vue文件里怎么写scss？
vue和react中dom的区别
react和vue的区别及优缺点是什么
vue-cli项目怎么使用vw单位？
更多相关阅读请进入《vue》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 在VUE style中使用data中的变量的方法详解
