vue中动态样式绑定的方式有哪些,vue给元素动态添加样式
本文要给大家介绍某视频剪辑软件实现动态样式的多种方法，下面给大家带来几个案列，需要的朋友可以借鉴研究一下。
目录
1.三元运算符判断2.动态设置班级
3.方法判断
4.数组绑定5.计算结合es6对象的计算属性名方法
1. 三元运算符判断
text :style={color:state？# ff 9933 : # ff 0000 } hello world/text
脚本
导出默认值{
data() {
返回{
状态：真
}
}
}
/脚本
2. 动态设置class
2.1 主要运用于：实现循环列表中点击时，相应的元素高亮；（默认首个元素高亮)
模板
div class=wrapper v-for=(item，index)in house list :key= index @ click= right tap(index)
div class= house title :class= { active :index===right index }
{{item.name}}
/div
/div
/模板
脚本
导出默认值{
data() {
返回{
rightIndex:0，
房屋列表：[]
};
},
方法：{
右键单击（索引){
this.rightIndex=index
}
}
}
/脚本
样式lang=scss 范围。包装{
宽度：118像素
高度：60px
边距：6px自动0自动。房屋所有权{
字体大小：22px
文本对齐：居中；
空白：nowrap
溢出：隐藏；
文本溢出：省略号；
}。活动{
颜色：# 2a 7 FFA
背景色：粉色；
}
}
/风格
2.2 主要运用于：为特定数值设置相应样式；
差异
:class=activeId===item.id？activeStyle:machineBar
列表中的v-for=(item，index :key= index @ click= click event
p{{item.name}}/p
/div
3. 方法判断
3.1 主要运用于：为不同的数据值设置相应的样式；
模板
div v-for=(item，index) in houseList :key=index
div:style=获取样式(item。状态)“{ { item。name } }/div
/div
/模板
脚本
导出默认值{
data(){
返回{
houseList:[
{
id:1，
名称：1,
状态：“一个”
},{
id:2，
名称：2,
状态：" b "
},{
id:3，
名称：3,
状态：" c "
}
]
}
},
方法：{
getStyle(e){
console.log(值，e)
if(e===a){
返回{
宽度：“60px”，
高度：“60px”，
背景："黄色",
边距："自动10px "
}
}else if(e===b){
返回{
宽度：“60px”，
高度：“60px”，
背景："红色",
边距："自动10px "
}
}else if(e===c){
返回{
宽度：“60px”，
高度：“60px”，
背景："粉色",
边距："自动10px "
}
}
}
}
}
/脚本
3.2 主要运用于：在元素多从事件下，显示相应的样式；
模板
差异
class= home wrap :class= { select :selected===1， click: clicked===1}
@ click= handle click(1) @ mousedown=菜单上的select(1)
主页
/div
/模板
脚本
导出默认值{
返回{
已选择：0,
点击次数：0
}
方法：{
菜单选择（值){
this.selected=值
},
手柄点击(值){
this.selected=0
this.clicked=value
}
}
}
/脚本
style lang=stylus 范围。homeWrap.select
背景红色。homeWrap.click
背景黄色
/风格
4. 数组绑定
div :class=[isActive，isSort]/div
//数组与三元运算符结合判断选择需要的班级
div class= item :class=[item。“名字，”lg:sm]/div
div class= item :class=[item。“18岁？”灰色： ]/div
//数组对象结合
div :class=[{ active: isActive }， sort]/div
data() {
返回{
无效："活动",
isSort:"排序"
}
}
//css。活动{
/*这里写需要设置的第一种样式*/
}。排序{
/*在这里写需要设置的第二种样式*/
}
5. computed结合es6对象的计算属性名方法
div:class object /div
导出默认值{
data(){
返回{
isActive:真的
}
},
计算值：{
类对象(){
返回{
class_a:this.isActive，
class_b:这是主动的
//这个要根据项目情况修改填写。
}
}
}
}
//css。a类{
/*在这里写需要设置的第一个样式*/
}。b类{
/*在这里写需要设置的第二种样式*/
}
以上是Vue实现动态样式的各种方法总结的详细内容。更多关于Vue实现动态样式的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。