25-vue语法 `${ }` （模版字符串）

一、基础用法${ }用``包裹起来

Const name = '小缘'
const age = 14
console.info(`大家好，我叫${name}，今年${age}岁了`)
// 等价于
console.info('大家好，我叫' + name + '，今年' + age + '岁了')
 
// 最大的优势是支持换行字符串
Const url = '//baidu.com'
Const text = '百度一下，你就知道'
Const html = `
  <div class="container">
    <a href="${url}">${text}</a>
  </div>
`
console.log(html)
console.log(typeof html)

二、在{ }中使用函数动态传值

html文件中
<span :style="`color:${getColor(a.statustext)}`" class="nowStatus">
   [ {{ a.statustext }} ]
</span>
js文件中
getColor(status) {
    let color;

            if (status === '退回') {
                color = '#e64545';
            }
            if (status === '待受理') {
                color = '#2e6be5';
            }
            if (status === '办结') {
                color = '#35b389';
            }
            if (status === '已回复，待评价') {
                color = '#f79042';
            }

            return color;
        },

三、如何在vue行内使用三元表达式

使用style动态改变样式的写法：

这里需要注意因为是动态改变style前面必须要带:style

<el-button :style="{'color':status === true ? '#FF5757':'#757575'}">按钮</el-button>

使用class动态改变样式的写法：

<!-- 这里是改变字体图标 -->
<i class="iconfont "  :class="[isShow=='password'?'icon-kejian':'icon-bukejian']"></i>