动态绑定值

模板字符串 ` ` ： 简化字符串拼接；

 ${} ：插入变量或表达式的结果，在 ${} 中调用函数，并将返回值插入到字符串中；

 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>