前言
前端开发中,面对复杂的布局,有时会需要用到三元表达式,来设置布局样式。
实现
一、设置style,使用 :style="{ '样式名' : '样式值' }" 来设置,必须是字符串形式。
<template>
<text :style="{'background': isWhite ? 'white':'#00ff00'}">三元表达式设置style</text>
<text :style="{'width': l_width, 'height': l_height}">三元表达式设置style</text>
</template>
<script>
export default {
data() {
return {
l_width:'100rpx',
l_height:'100rpx',
}
}
}
</script>
二、设置class,
1、数组形式
<template>
<text :class="['item', itemStatus==0?'active':'']" >三元表达式设置style</text>
</template>
<script>
export default {
data() {
return {
itemStatus:0, // 0:高亮显示,即设置active
}
}
}
</script>
<style>
.item{width:100%; height:100rpx;}
</style>
注意:数组中的item必须加引号。若不加引号,代表的时data中的一项对象,并不是类名;将item加上引号就可以变成类名。
2、字符串拼接,两个字符串之间必须要有空格。
<template>
<text :class="'status'+(itemStatus==0?' active':'')" >三元表达式设置style</text>
</template>
<script>
export default {
data() {
return {
itemStatus:0, // 0:高亮显示,即设置active
}
}
}
</script>
<style>
.status0{color:red,font-size:30rpx}
.status1{color:blue,font-size:30rpx}
.status2{color:green,font-size:30rpx}
</style>
注意:active前面要加一个空格(空格个必须有)。
3、绑定对象【推荐】,通常给class绑定对象,这样就可以动态切换样式。文章来源:https://www.toymoban.com/news/detail-680328.html
- 数组形式:[样式1,样式2]
- 对象形式:{判断条件}。
<template>
<text :class="[itemStatus==0?'status0':'status1']" >三元表达式设置style</text>
<text :class="{active: isActive}" >三元表达式设置style</text>
</template>
<script>
export default {
data() {
return {
itemStatus:0,
isActive:false, // false / true
status0:{'color':'red','font-size':'30rpx'}
status1:{'color':'blue','font-size':'30rpx'}
}
}
}
</script>
4、数据标记文章来源地址https://www.toymoban.com/news/detail-680328.html
<template>
<text class="red" v-show="title">三元表达式设置style</text>
<text class="red" v-if="title">三元表达式设置style</text>
</template>
<script>
export default {
data() {
return {
title:'absdefg',
}
}
}
</script>
<style>
.red{color:red,font-size:30rpx}
</style>
到了这里,关于vue使用三元表达式设置style,class的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!