目录
一、style样式动态设置
1.普通对象动态添加(比较常见)
<view :style="{color:fontColor}"> </view>
<view :style="{ paddingTop: num + 'px' }"></view>
<view :style="{backgroundImage: 'url(' + imageURL + ')','background-repeat':'no-repeat',
backgroundSize:'100% 100%'}"></view>
//1.动态添加颜色
//2.动态添加边距
//3.动态添加背景图片
export default {
data() {
return {
imageURL: 'https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg', //图片
num:20, //字体大小
fontColor:'red' //字体颜色
}
}
},
2.数组对象动态添加
<view :style="[{paddingTop: num + 'px'},{color:fontColor}]"></view>
<view :style="[{'background-image':`url(${imageURL})`},{'background-repeat':'no-repeat'},
{'background-size':'100% 100%'}]"></view>
//1.动态添加颜色,动态添加边距
//2.动态添加背景图片
export default {
data() {
return {
imageURL: 'https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg', //图片
num:20, //字体大小
fontColor:'red' //字体颜色
}
}
},
3.三步运算动态添加
<view :style="[{color:(flag?fontColor:'green')},{fontSize:'20px'}]">green</view>
<view :style="[{color:(!flag?fontColor:'green')}]">red</view>
//如果flag为true 颜色就为red色
//如果flag为false 颜色就为green色
export default {
data() {
return {
fontColor:'red',
flag:false
}
}
},
4.多重值(这种用的不是很多)
<view :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></view>
二、class动态设置
普通动态添加(比较常见)
<template>
<view :class="flag?'flaGreen':'flagRed'">1234546</view>
</template>
<style>
.flaGreen{
color: green
}
.flagRed{
color: red
}
</style>
export default {
data() {
return {
flag:false
}
}
}