【vue】插值 :class:style

lorogy

已于 2023-08-29 14:06:00 修改

阅读量878

点赞数 2

文章标签： vue v-bind

于 2019-11-19 16:46:13 首次发布

本文链接：https://blog.csdn.net/lorogy/article/details/103143550

版权

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