vue class动态绑定样式,vue绑定内联样式
本文主要详细介绍Vue的风格绑定。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
:
目录
1.样式绑定(类，样式)1.1绑定类1.2绑定样式摘要
1. 样式绑定（class、style）
1.1 绑定class
固定类名正常编写，需要动态绑定的类名用v-bind来绑定。
示例：class=mood
下面举一些适用的场景：
1.绑定类style-string编写，适用于：style的类名不确定，需要动态指定。
2.绑定类样式——数组编写使用的场景：绑定样式的数量不确定，名称不确定。
3.绑定类样式——写对象用的场景：绑定数确定了，名字也确定了。不确定的是是否使用类名。
身体
风格。基本{
宽度：100px
高度：100px
边框：2px纯黑；
}。快乐{
宽度：100px
高度：100px
边框：2px纯色橙色；
背景色：浅紫色；
}。悲伤{
宽度：100px
高度：100px
边框：2px纯黑；
背景色：银色；
}。正常{
宽度：100px
高度：100px
边框：2px纯绿黄色；
背景色：sandybrown
}。大纲{
边界半径：20%；
}。颜色{
颜色：天蓝色；
}。尺寸{
Font-family:微软雅黑；
字体大小：20px
字体粗细：粗体；
}
/风格
div id=root
！-
1:点击div1随机切换心情。
班级风格-字符串写作
1.固定的类名会正常写，需要动态指定的类名会写在这里：class=xxx
2.使用场景：样式的类名不确定，需要动态指定。
-
div class= div 1 basic :class= mood @ click= random { name } }/div
！-
2:单击div2添加课程或删除课程。
类样式-数组编写
1.使用场景：绑定的样式数量不确定，名称不确定。
2.shift():删除数组中的第一个数据，push( XXX )；在末尾添加一个新数据。
-
div class= div 2 basic :class= click= remove { { name } }/div
！-注意：在vue操作下，写入的字符串是表达式，写入的字符串是值-
！-div class= div 2 basic :class=[ outline ， color ， size]/div -
！-
3:在轮廓和颜色之间切换
班级风格-对象写作
使用场景：绑定数量确定，名称也确定。不确定的是是否使用类名。
-
div class= div 3 basic :class= click= change { name } }/div
/div
脚本
Vue.config.productionTip=false
让vm=new Vue({
el: #root ，
数据：{
名字：“你好，Vue！”,
情绪：“正常”，
classArr:[outline ， color ， size]，
{ 0 }
大纲：真的，
颜色：真
}
},
方法：{
随机(){
设arr=[快乐，悲伤，正常]
//Math.floor:表示向下取整，Math.random():取值为0-1，不能取1。
this . mood=arr[math . floor(math . random()* 3)]
},
移除(){
this.classArr.shift()
},
更改(){
vm.classObj.color=！vm.classObj.color
vm.classObj.outline=！vm.classObj.outline
}
}
})
/脚本
1.2 绑定style
云娥* style= style obj
div id=root :style=styleobj
你好，{{name}}！
/div
脚本编写
查看。配置。生产提示=假
让vm=新视图。{ {同上。} }
<根>,
日期：>
名称：视图，
样式对象：>
fontSize: 50 像素"，
颜色：红色，
边界：1 像素" "实体" "黑色"
}
}
})
/脚本
总结
本篇文章就到这里了，介绍了类你好样式(风格)如何绑定，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。