当前第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中的变量的方法详解的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
详解vue中动态添加类名的方法
vuex中常用知识点（总结）
vue通常在项目中干什么
怎么用npm安装vue
vue界面刷新不显示怎么办
bootstrap和vue的区别
vue 3.2发布啦，站起来继续学！
vue脚手架搭建流程
.vue文件可以写注释吗
html style标签是什么意思？关于style标签的使用方法详解
更多相关阅读请进入《vue》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » 在VUE style中使用data中的变量的方法详解
