一 : 指令的概念:
指令是vue自定義的以v-開頭的自定義屬性。每個不同的屬性都有各自不同的意義和功能
二 : 指令的語法:
v-指令名 = “表達式判斷或者是業(yè)務(wù)模型中屬性名或者事件名”
三 : 具體指令
- v-text
作用 : 操作元素中的純文本
快捷方式 : {{}}
栗子1
簡寫形式:將v-text=""換成{{}}
<div id="app">
{{ message }}
</div>
var app = new Vue({
el : '#app',
data : {
message : 'hello world'
}
})
結(jié)果:hello world
例子2
<h1 id="app1" v-text="'今天是'+year+'年'+month+'月'"></h1>
var app1 = new Vue({
el : "#app1",
data : {
year : new Date().getFullYear(),
month : new Date().getMonth()+1
}
})
結(jié)果:今天是2017年5月
大胡子{{}}里邊支持表達式
但不是所有的表達式都能放在里邊,只有單個語句的可以,像var和if就不可以
如果想使用if語句的話,用三元運算符代替
- v-html
作用 : 操作元素中的HTML標簽
v-text會將元素當成純文本輸出姐仅,v-html會將元素當成HTML標簽解析后輸出
栗子1
<div id="app3">
{{ message }}
</div>
var app3 = new Vue({
el : "#app3",
data : {
message : ""
}
})
由此可見:{{}}/v-text不能解析html元素,只會照樣輸出