您好,登錄后才能下訂單哦!
這篇文章主要介紹了vue中指令v-text、v-html、v-bind怎么用,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
一 : 指令的概念:
指令是vue自定義的以v-開頭的自定義屬性。每個不同的屬性都有各自不同的意義和功能
二 : 指令的語法:
v-指令名 = “表達式判斷或者是業(yè)務模型中屬性名或者事件名”
三 : 具體指令
1. v-text
作用 : 操作元素中的純文本
快捷方式 : {{}}
栗子1
簡寫形式:將v-text=""換成{{}}
<div id="app"> {{ message }} </div> var app = new Vue({ el : '#app', data : { message : 'hello world' } })
結(jié)果:hello world
栗子2
<h2 id="app1" v-text="'今天是'+year+'年'+month+'月'"></h2> var app1 = new Vue({ el : "#app1", data : { year : new Date().getFullYear(), month : new Date().getMonth()+1 } })
結(jié)果:今天是2017年5月
等同于:<h2 id="app1">今天是{{year}}年{{month}}月</h2>
這里v-text="",雙引號并不是代表字符串,而是vue自定義的劃定界限的符號。如果我們里邊輸出字符串,就要在里邊再添加一對單引號。而且經(jīng)測驗,要想輸出字符串,必須添加單引號,否則會報錯
這里month默認是從0開始的,所以我們要+1
這里{{}}代表的就是"",所以在v-text=""中,我們在內(nèi)容里邊就不需要再寫{{}}了,直接寫data值就行
栗子3
<div id='app'> <h2>{{ message }}</h2> <h2>{{ message.concat('!!!') }}</h2> <h2>{{ message? 'has message' : 'no message' }}</h2> 下面這兩個語句報錯 <h2>{{ var message = 'message' }}</h2> <h2>{{ if(message){return info} }}</h2> </div> var app = new Vue({ el : '#app', // 綁定了上邊的id='app'的元素 data : { message : 'hello' } })
結(jié)果:
? hello
? hello!!!
? has message
第四五句報錯
大胡子{{}}里邊支持表達式
但不是所有的表達式都能放在里邊,只有單個語句的可以,像var和if就不可以
如果想使用if語句的話,用三元運算符代替
栗子4
可以采用對象的形式傳遞多個數(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標簽
v-text會將元素當成純文本輸出,v-html會將元素當成HTML標簽解析后輸出
栗子1
<div id="app3"> {{ message }} </div> var app3 = new Vue({ el : "#app3", data : { message : "![](img/1.jpg)" } })
由此可見:{{}}/v-text不能解析html元素,只會照樣輸出
栗子2
<div id="app3" v-html="message"></div> var app3 = new Vue({ el : "#app3", data : { message : "![](img/1.jpg)" } })
結(jié)果 : 成功顯示圖片
3. v-bind
作用 : 綁定標簽屬性,:后面是標簽屬性名
栗子1
<div id="app"> <a href="" v-bind:href=" rel="external nofollow" hrefvalue"> ![](source) </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'> 鼠標懸停幾秒鐘查看此處動態(tài)綁定的提示信息! </span> </div> var app2 = new Vue({ el : '#app2', data : { message : '頁面加載于' + new Date() } })
感謝你能夠認真閱讀完這篇文章,希望小編分享的“vue中指令v-text、v-html、v-bind怎么用”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關注億速云行業(yè)資訊頻道,更多相關知識等著你來學習!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。