Vue实现动态样式的多种方法汇总
更新时间：2021年06月19日 08:49:04 作者：明天也要努力
本文要给大家介绍Vue实现动态样式的多种方法，下面给大家带来几个案列，需要的朋友可以借鉴研究一下。
1. 三元运算符判断
<text :style="{color:state?'#ff9933':'#ff0000'}">hello world </text>
<script>
export default {
data() {
return {
state: true
}
}
}
</script>
2. 动态设置class
2.1 主要运用于：实现循环列表中点击时，相应的元素高亮；（默认首个元素高亮）
<template>
<div class="wrapper" v-for="(item,index) in houseList" :key="index" @click="rightTap(index)">
<div class="houseTitle" :class="{'active' : index === rightIndex}">
{{item.name}}
</div>
</div>
</template>
<script>
export default {
data() {
return {
rightIndex:0,
houseList:[]
};
},
methods:{
rightTap(index){
this.rightIndex = index
}
}
}
</script>
<style lang="scss" scoped>
.wrapper{
width: 118px;
height: 60px;
margin: 6px auto 0 auto;
.houseTitle{
font-size: 22px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.active{
color:#2a7ffa;
background-color: pink;
}
}
</style>
2.2 主要运用于：为特定数值设置相应样式；
<div
:class="activeId === item.id?'activeStyle':'machineBar'"
v-for="(item,index) in List" :key="index" @click="clickEvent">
<p>{{item.name}}</p>
</div>
3. 方法判断
3.1 主要运用于：为不同的数据值设置相应的样式；
<template>
<div v-for="(item,index) in houseList" :key="index">
<div :style="getStyle(item.status)">{{item.name}}</div>
</div>
</template>
<script>
export default {
data(){
return{
houseList:[
{
id:1,
name:1,
status:'a'
},{
id:2,
name:2,
status:'b'
},{
id:3,
name:3,
status:'c'
}
]
}
},
methods:{
getStyle(e){
console.log('值',e)
if(e === 'a'){
return {
width:'60px',
height:'60px',
background:'yellow',
margin: '10px auto'
}
}else if(e === 'b'){
return {
width:'60px',
height:'60px',
background:'red',
margin: '10px auto'
}
}else if(e === 'c'){
return {
width:'60px',
height:'60px',
background:'pink',
margin: '10px auto'
}
}
}
}
}
</script>
3.2 主要运用于：在元素多从事件下，显示相应的样式；
<template>
<div
class="homeWrap" :class="{'select': selected === 1,'click': clicked === 1}"
@click="handleClick(1)" @mousedown="menuOnSelect(1)">
主页
</div>
</template>
<script>
export default {
return {
selected: 0,
clicked: 0
}
methods:{
menuOnSelect(value){
this.selected = value;
},
handleClick(value){
this.selected = 0
this.clicked = value
}
}
}
</script>
<style lang="stylus" scoped>
.homeWrap.select
background red
.homeWrap.click
background yellow
</style>
4. 数组绑定
<div :class="[isActive,isSort]"></div>
// 数组与三元运算符结合判断选择需要的class
<div class="item" :class="[item.name? 'lg':'sm']"></div>
<div class="item" :class="[item.age<18? 'gray':'']"></div>
// 数组对象结合
<div :class="[{ active: isActive }, 'sort']"></div>
data() {
return{
isActive:'active',
isSort:'sort'
}
}
// css
.active{
/*这里写需要设置的第一种样式*/
}
.sort{
/*这里写需要设置的第二种样式*/
}
5. computed结合es6对象的计算属性名方法
<div :class="classObject"></div>
export default {
data(){
return{
isActive:true
}
},
computed:{
classObject() {
return{
class_a:this.isActive,
class_b:!this.isActive
// 这里要结合自身项目情况修改填写
}
}
}
}
// css
.class_a{
/*这里写需要设置的第一种样式*/
}
.class_b{
/*这里写需要设置的第二种样式*/
}
以上就是Vue实现动态样式的多种方法汇总的详细内容，更多关于Vue实现动态样式的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家介绍了Element Table行的动态合并及数据编辑示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了vue选择下拉框动态变化表单方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue实现双向绑定的方法，了解vue的双向数据绑定原理以及核心代码模块，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
本文主要介绍了vue2+elementui进行hover提示的使用，主要分为外部和内部，具有一定的参考价值，感兴趣的可以了解一下2021-11-11
vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用,下面这篇文章主要给大家介绍了关于Vue中mixins的使用方法以及实际项目应用指南,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue中使用$http.post请求传参的错误及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
下面小编就为大家分享一篇Vue.js 点击按钮显示/隐藏内容的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了van-dialog 组件调用报错的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了vue实现导航标题栏随页面滚动渐隐渐显效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-03-03
这篇文章主要给大家介绍了关于vue中如何自定义右键菜单的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
最新评论