一 ： 指令的概念：
指令是vue自定義的以v-開頭的自定義屬性。每個(gè)不同的屬性都有各自不同的意義和功能
二 ： 指令的語法：
v-指令名 = “表達(dá)式判斷或者是業(yè)務(wù)模型中屬性名或者事件名”
三 ： 具體指令
1. v-text
作用 ： 操作元素中的純文本
快捷方式 ： {{}}
栗子1
簡(jiǎn)寫形式：將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月
等同于：<h1 id="app1">今天是{{year}}年{{month}}月</h1>
栗子3
<div id='app'> <h1>{{ message }}</h1> <h1>{{ message.concat('!!!') }}</h1> <h1>{{ message? 'has message' : 'no message' }}</h1> 下面這兩個(gè)語句報(bào)錯(cuò) <h1>{{ var message = 'message' }}</h1> <h1>{{ if(message){return info} }}</h1> </div>var app = new Vue({ el : '#app', // 綁定了上邊的id='app'的元素 data : { message : 'hello' } })結(jié)果：
hello
hello!!!
has message
第四五句報(bào)錯(cuò)
大胡子{{}}里邊支持表達(dá)式
但不是所有的表達(dá)式都能放在里邊，只有單個(gè)語句的可以，像var和if就不可以
如果想使用if語句的話，用三元運(yùn)算符代替
栗子4
可以采用對(duì)象的形式傳遞多個(gè)數(shù)據(jù)
<div id="app2"> <p>姓名 : {{ person.name }}</p> <p>性別 : {{ person.sex }}</p> <p>年齡 : {{ person.age }}</p></div>var app2 = new Vue({ el : "#app2", data : { person : { name : '小明', sex : '男', age : 8 } }})結(jié)果：
姓名 : 小明
性別 : 男
年齡 : 8
2. v-html
作用 ： 操作元素中的HTML標(biāo)簽
v-text會(huì)將元素當(dāng)成純文本輸出，v-html會(huì)將元素當(dāng)成HTML標(biāo)簽解析后輸出
栗子1
<div id="app3"> {{ message }}</div>var app3 = new Vue({ el : "#app3", data : { message : "" }})由此可見：{{}}/v-text不能解析html元素，只會(huì)照樣輸出
栗子2
<div id="app3" v-html="message"></div>var app3 = new Vue({ el : "#app3", data : { message : "" }})結(jié)果 ： 成功顯示圖片
3. v-bind
作用 ： 綁定標(biāo)簽屬性，：后面是標(biāo)簽屬性名
栗子1
<div id="app"> <a href="" v-bind:href=" rel="external nofollow" hrefvalue">  </a></div>var app = new Vue({ el : "#app", data : { hrefvalue : 'http://www.baidu.com', source : 'img/1.jpg' }})
栗子2
<div id="app2"> <span v-bind:title = 'message'> 鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的提示信息！ </span></div>var app2 = new Vue({ el : '#app2', data : { message : '頁面加載于' + new Date() }})以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
