Vue3从零开始系列-07_模板语法

官方文档很全

这里稍微列一下

DOM

v-once 带上后，就渲染一次，你改数值也不会变

<p>{{ msg }} </p>
<p v-once>{{ msg }}</p>

v-html 不进行渲染，原样输出

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

data(){
	return{
		rawHtml: '<span style="color: red">This should be red.</span>'
	}
}

数据绑定

v-bind:数据名=“数据源”

JS表达式

数据源可以用表达式来搞

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

基本运算，三目运算符，JS字符串函数调用，字符串拼接。

v-on && v-if

v-on:事件=“函数”
v-if=“布尔值”

缩写

v-bind:aaaa="bbbb"等价于:aaaa=“bbbb”
v-on:click="fuck"等价于@click=“fuck”
糖，吃糖