一、style样式动态设置
1.普通对象动态添加(比较常见)
<template>
<view>
<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.动态添加背景图片
</view>
</template>
<script>
export default {
data() {
return {
imageURL: 'https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg', //图片
num:20, //字体大小
fontColor:'red' //字体颜色
}
}
}
</script>
2.数组对象动态添加
<template>
<view>
<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.动态添加背景图片
</view>
</template>
<script>
export default {
data() {
return {
imageURL: 'https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg', //图片
num:20, //字体大小
fontColor:'red' //字体颜色
}
}
}
</script>
3.三元运算动态添加
<template>
<view>
<view :style="[{color:(flag?fontColor:'green')},{fontSize:'20px'}]">green</view>
<view :style="[{color:(!flag?fontColor:'green')}]">red</view>
//如果flag为true 颜色就为red色
//如果flag为false 颜色就为green色
<view :style="[flag?{top:searchTop + 'px',width:searchWidth + 'px'}:{top:'100px',width:'100%'}]"></view>
</view>
</template>
<script>
export default {
data() {
return {
fontColor:'red',
flag:false,
searchTop:20,
searchWidth:100
}
}
}
</script>
4.函数返回
用于根据值不同需要修改的参数过多的时候
<template>
<view>
<view :style="getContractStatusStyle(item.rentStatus)">green</view>
</view>
</template>
<script>
export default {
data() {
return {
fontColor:'red',
flag:false,
searchTop:20,
searchWidth:100
}
},
methods:{
getContractStatusStyle(rentStatus : number) {
let styleDict = {}
switch (rentStatus) {
case 0:
styleDict = {
'background': 'rgba(253, 143, 33, 0.2)',
'color': '#FD8F21'
}
break;
case 1:
styleDict = {
'background': 'rgba(80, 93, 255, 0.2)',
'color': '#505DFF'
}
break
case 2 || 3:
styleDict = {
'background': 'rgba(252, 84, 33, 0.2)',
'color': '#FC5421'
}
break
default:
styleDict = {
'background': 'rgba(252, 84, 33, 0.2)',
'color': '#FC5421'
}
break;
}
return styleDict
}
}
}
</script>
5.多重值(这种用的不是很多)
<view :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></view>
二、class动态设置
1.简单三元运算添加(比较常见)
<template>
<view :class="flag?'flaGreen':'flagRed'">class</view>
</template>
<script>
export default {
data() {
return {
flag:false
}
}
}
</script>
<style>
.flaGreen{
color: green
}
.flagRed{
color: red
}
</style>
2.函数返回
用于根据值不同需要修改的参数过多的时候
<template>
<view>
<view :class="retrunClass(status)">狀態</view>
</view>
</template>
<script>
export default {
data() {
return {
status:10
}
}
methods:{
retrunClass(Status : number) {
let strClass = ''
switch (Status) {
case 10:
strClass = 'page1'
break;
case 11:
strClass = 'page2'
break
case 12:
strClass = 'page3'
break
default:
strClass = ''
break;
}
return strClass
}
}
}
</script>