一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第3天,点击查看活动详情。
学习过程中将笔记整理跟大家分享,希望对大家也有所帮助,共同成长进步💪~
如果大家喜欢,可以点赞或留个言哦💕~~~~,谢谢大家⭐️⭐️⭐️~~~
动态设置class
1.多个类名判断
:class ="{'class1':condition==='0','class2':condition==='1' }"
//冒号前为类名后为条件
2.三目判断
:class="data===1?'css样式1':'css样式2'"
3.条件判断
:class="index%2>0?'bluePattern':'redPattern'"
4.切换样式
:class="{'activities':Index===index}"
//例如li、tab适用
<li v-for="(item,index) in data" @click="toggleTabs(item,index)"
:class="{active:index==nowIndex}">{{item.name}}
</li>
动态设置style
1.条件判断
:style="{ width: clickTerminal ? '89%' : '100%' }"
2.根据数据动态设置
<li v-for="(item,index) in data" :style="{'background':item.color}">
{{item.name}}
</li>
data: function () {
data:[
{
name:'xxx系统',
color:'red',
id:'1',
},
{
name:'yyy系统',
color:'pink',
id:'2',
},
]
}
3.根据函数动态设置
<li v-for="(item,index) in data" :style="topindex()"> {{item.name}} </li>
topindex(){
let w = '100%';
var h = this.topData.length;
var dvpHeight = `height: calc(100% / ${h})`;
return dvpHeight
},
谢谢大家阅读⭐️⭐️⭐️,如果喜欢,可以点赞或留言哟💕💕💕
专栏推荐
推荐一下自己的专栏,欢迎大家收藏关注😊~