vue插值--:class:style

html中使用變量

html中文本–>{{}}

<span>Message: {{ msg }}</span>

屬性值或布爾值–>v-bind

<div :id="myId"></div>
<button :disabled="btnDisable">Button</button>

html表達式–>{{}}

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

屬性拼接–>v-bind

雙引號、單引號、變量  "'字符串'+msg"

或者

雙引號、``、${}   "` 字符串${msg}`"

<div :id="'chart-' + num" :class="'list'+num"></div>
<div :id="`myChart${index+1}`" :class="`position${index+1}`">

: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}`">