中心点:1. 三目运算 2. class和style前面千万不要忘记加":"
class动态绑定
<i v-if="icon" :class="['el-icon-' + icon]" class="el-input__icon material-input__icon" />
icon是数据中动态返回的值,可以用在循环中,便于不同的class名称,动态添加
或者
<i :class="show?'el-icon-close':'el-icon-setting'" /> show为动态设置的变量
style动态绑定
<i class="el-icon-d-arrow-right arrow_show_more" :style="{transform:currentType ? 'rotate(-90deg)' : 'rotate(90deg)'}" @click="dropFun"></i>
或者
<i class="el-icon-d-arrow-right arrow_show_more" :style="{transform:currentType == 1 ? 'rotate(-90deg)' : 'rotate(90deg)'}" @click="dropFun"></i>
currentType为动态设置的变量
两者还可以通过组件动态传值赋值
<div :id="id" :class="className" :style="{height:height,width:width}" />
export default {
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
}
},
}