模板字符串 ` ` : 简化字符串拼接;
${} :插入变量或表达式的结果,在 ${}
中调用函数,并将返回值插入到字符串中;
1. 绑定值拼接形式 :绑定多个组合动态值,比如接口返回的数据等
例如:
<el-dialog :title="`${formData.oldSupervisorName ? '修改' : '新增'}通知`">..</el-dialog>
:label=“`${item.label}${item.num > 0 ? `(${item.num})` : ' ' }`”
:label="`${item.indexName}-${getindexType(item.indexType)}`"
<template>
<el-form-item
label="部门"
prop="">
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="(item,index) in departmentOptions"
:key="index"
:label="`${item.label}(${item.num})`"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</template>
data(){
return {
departmentOptions:[
{
value: '选项1',
label: '选项绑定值',
num:3,
}, {
value: '选项2',
label: '选项',
num:5,
}, {
value: '选项3',
label: '选项',
num:2,
}
],
value: '',
}
}
2.动态绑定类名
1.class的对象实现::class="{属性名:布尔值,属性名:布尔值}"
<span :class="className" >只有一个动态类名</span>
<div :class="{ active: isActive, 'text-danger': hasError }">key:value(布尔值)</div>
<div :class="isActive(tag) ? 'active' : ''"></div>
data: { isActive: true, hasError: false }
.className{ color:red,}
.active{color:red,}
2.class的数组实现::class="[类名 类名,布尔值? 类名: 类名]"
<div :class="[isActive ? activeClass : '', errorClass]"></div>
// 添加多个静态类名class-one class-two classFour
<div :class="['class-one class-two' classFour, panel? '' : 'class-three']"
// 多个类名,demo-box静态类名,始终应用 title-wrap类名需要条件,条件isShow为true会被应用
<div :class="['demo-box', { 'title-wrap': isShow }]"> </div>
data: { panel:false, activeClass: 'active', errorClass: 'text-danger',isShow :false}
.class-one{}
.class-two{}
.class-three{}
.demo-box{ color:red }
.subtitle-wrap{ font-size:16px}
1. style使用对象语法 :style="{ 属性: 属性值 , 属性: 属性值 , .......}
<template>
<div :style="{ height: height, width: width }" ></div>
<div :style="{ top: strokeWidth+ 'px' }"></div>
// 接受传递的值时item.width
<div :style="{ height: `${strokeWidth + 2}px`, width: `${item.width}px` }"></div>
</template>
export default {
data(){
return{
height:'10px',
width:'10px',
strokeWidth:10,
}
}
}
2.style使用数组语法::style="[ 类名 , 类名 ]"
<div :style="[styleColor, styleSize]"></div>
<div :style="[textStyle, { transform: `translateY(${spacing}px)` },{ 'custom-textarea': disabled }]">
<script>
export default {
data() {
return {
styleColor:{
color: 'pink',
},
styleSize:{
fontSize: '16px',
},
spacing: 20, // 垂直移动的距离
textStyle: {
color: 'blue',
}
}
}
}
</script>
<style>
.text {
}
</style>