html中使用变量，vue插值

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

属性值或布尔值–>v-bind
<div :id="myId"></div>
<button :disabled="btnDisable">Button</button>

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

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

双引号、``、${}   "` 字符串${msg}`"
1
<div :id="'chart-' + num" :class="'list'+num"></div>
<div :id="`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'
    }
}

<p :style="{fontFamily:a}">{{msg1}}</p>

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

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


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

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

<div :class="{active:isActive}">

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



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