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