vue :class 动态绑定样式,vue绑定内联样式
这篇文章主要介绍了vue。j中的绑定样式实现，展开的内容呦风格绑定样式和绑定班级样式，具体相关内容需要的小伙伴可以参考下面文章介绍
目录
绑定班级样式1、字符串写法2、数组写法3、对象写法风格绑定样式审视
绑定class样式
1、字符串写法
！声明文档类型
html lang=en
头
meta charset=UTF-8
titleVue初识/标题
脚本类型=text/javascript src= ./js/vue.js/script
风格。基本{
宽度：400像素
高度：100像素
边框：1px纯黑
}。快乐{
背景：粉色；
}。悲伤{
背景：天蓝色；
}。正常{
背景：海蓝宝石；
}
/风格
/头
身体
div id=root
！-绑定班级样式-字符串写法，适用于：样式类名不确定，需动态指定-
div class= basic :class= mood @ click= change mood { name } }/div
/div
脚本类型=文本/javascript
Vue.config.productionTip=false
新Vue({
el:#root ，
数据：{
名称：好好学习，
情绪："正常"
},
方法：{
changeMood(){
const arr=[快乐,悲伤,正常]
//生成0-2的随机数
这个。mood=arr[数学。地板(数学。random()* 3)]
}
}
})
/脚本
/body
/html
2、数组写法
！声明文档类型
html lang=en
头
.
风格。基本{
宽度：400像素
高度：100像素
边框：1px纯黑
}
.addOne {
背景：橙色；
}。addTwo {
字体大小：40px
}。添加三个
边框半径：5px
}
/风格
/头
身体
div id=root
.
！-绑定班级样式-数组写法，适用于：要绑定的样式个数和名字都不确定-
basic :class= arr“{ name } }/div
/div
脚本类型=文本/javascript
Vue.config.productionTip=false
新Vue({
el: #root ，
数据：{
名称： 好好学习，
情绪："正常",
classArr: [addOne ， addTwo ， addThree]
}
.
})
/脚本
/body
/html
3、对象写法
风格。基本{
宽度：400像素
高度：100像素
边框：1px纯黑
}。addOne {
背景：橙色；
}。addTwo {
字体大小：40px
}
/风格
！-绑定班级样式-对象写法-适用于：绑定样式个数确定，名字也确定，但动态决定用不用-
div class= basic :class= class 1 { { name } }/div
脚本类型=文本/javascript
Vue.config.productionTip=false
新Vue({
el:#root ，
数据：{
名称：好好学习，
{ 0 }
阿多内：假的，
addTwo:真的
}
}
})
/脚本
style 绑定样式
！-正常的风格写法-
div class= basic style= font-size:40px { { name } }/div
！-使用某视频剪辑软件展示样式-
div class= basic :style= { font size:fsize px } { { name } }/div
脚本类型=文本/javascript
Vue.config.productionTip=false
新Vue({
el: #root ，
数据：{
名称： 好好学习，
尺寸：40
}
})
/脚本
或者使用 style 对象写法：
div class= basic :style= style obj“{ name } }/div
脚本类型=文本/javascript
Vue.config.productionTip=false
新Vue({
el: #root ，
数据：{
名称： 好好学习，
styleObj:{
fontSize:30px ，
颜色：红色，
背景色："橙色"
}
}
})
/脚本
或者 style 数组写法：
div class= basic :style=[style obj，styleObj2]{{name}}/div
脚本类型=文本/javascript
Vue.config.productionTip=false
新Vue({
el: #root ，
数据：{
姓名：“努力学习”，
styleObj:{
fontSize:30px ，
颜色：红色
},
styleObj2:{
背景色：“橙色”
}
}
})
/脚本
绑定样式
1.班级风格
写法：class=xxxxxx可以是字符串、对象或数组。字符串写法适用于：的类名不确定。动态获取对象写法适用于：需要绑定多个样式，数组写法适用于：的编号和名称是确定的，但是否使用2不确定。风格：风格
:style=[a，b]其中a和b是样式对象。
scoped
作用：让样式在本地生效以防止冲突。Writing: style scoped后来在组件中使用。
关于Vue.js中绑定样式实现的这篇文章到此为止更多相关Vue绑定样式内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。