html中使用变量，vue插值

html中使用变量
html中文本–>{undefined{}}
Message: {{ msg }}

属性值或布尔值–>v-bind
"myId">
"btnDisable">Button

html表达式–>{undefined{}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
1

属性拼接–>v-bind
双引号、单引号、变量  "'字符串'+msg"
1
或者

双引号、``、${}   "` 字符串${msg}`"
1
"'chart-' + num" :class="'list'+num">
"`myChart${index+1}`" :class="`position${index+1}`">
1
2
:style–>{}
双引号、{}

data() {
    return {
        a:'微软雅黑',
        b: 5,
        c: '#fff',
        link1: '/home',
        d:'www',
        msg1:'1',
        msg2:'2',
        msg3:'3'
    }
}

"{fontFamily:a}">{{msg1}}

"{color:(b>0?c:'#000')}" :href="link1">{{msg2}}

"{fontSize:(d!='d'?'18rem':'16rem')">{{msg3}}



:class–>{}
双引号、{}

data() {
    return {
        current:'a',
        isActive:true,
    }
}
class="{list:(current=='a')}">
class="{list:(current=='b')}">

class="{active:isActive}">

"`myChart${index+1}`" :class="`position${index+1}`">



————————————————
版权声明：本文为CSDN博主「lorogy」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lorogy/article/details/103143550