(14):class用法
比如编辑页面和查看页面,内容都是一样的,这时候可以设置一个状态来区分,通过这个状态变量来给编辑处加上class,通过css来控制前端的权限,而不用写两个页面;再比如审核页面,需要查看哪些内容被修改过,修改过而未审核的标红,也可以设置统一的css。...
·
比如编辑页面和查看页面,内容都是一样的,这时候可以设置一个状态来区分,通过这个状态变量来给编辑处加上class,这个class通过css来控制前端的权限,而不用写两个页面;再比如审核页面,需要查看哪些内容被修改过,修改过而未审核的标红,也可以设置统一的css。语法为:
:class = "{className1:(条件1),className2:(条件2)}"
其中,className可以加上'',也可以不加引号。
例:
<template>
<div>
<div>
<el-select v-model="editSatus" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div>
<el-form>
<el-input
v-model="redtext"
:class="{'my-disabled':(editSatus === false)}"
></el-input>
</el-form>
<div v-for=" item in colors" :key="item">
<span :class="{'mytrue':(obj[`my${item}Change`] === 1),myred:(item === 'redtext')}">{{item}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
colors:['redtext','greentext','yellowtext'],
redtext: "redtext",
greentext: "greentext",
yellowtext: "yellowtext",
myredtextChange:1,
obj:{ myredtextChange:1,
mygreentextChange:0},
//是否可以编辑,默认可以
editSatus: true,
options: [
{
value: true,
label: "编辑"
},
{
value: false,
label: "查看"
}
]
};
},
methods: {
getText(item){
let val = 'my'+item+'Change';
return this.obj.myredtextChange;
}
}
};
</script>
<style lang="scss">
.my-disabled {
pointer-events: none;
}
.myred {
color: red;
.ivu-input.ivu-input-default {
color: red;
}
.ivu-select.ivu-select-single.ivu-select-default {
color: red;
}
textarea {
color: red;
}
.ivu-form-item-label {
color: red;
}
}
.mytrue{
font-style:oblique
}
</style>
再如删除某行页面上以中划线表示并字体标红:
<el-table-column label="项目合同金额">
<template slot-scope="scope">
<span
:style="{color:(scope.row.status==2) ? 'red' : '#007bd9',
'text-decoration': (scope.row.status==2) ? 'line-through' : 'none'}"
>{{scope.row.projectMoney}}</span>
</template>
</el-table-column>
更多推荐
所有评论(0)