vue學習筆記之指令v-text && v-html && v-bind詳解

vue學習筆記之指令v-text && v-html && v-bind詳解
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

一 : 指令的概念:

指令是vue自定義的以v-開頭的自定義屬性。每個不同的屬性都有各自不同的意義和功能

二 : 指令的語法:

v-指令名 = “表示式判斷或者是業務模型中屬性名或者事件名”

三 : 具體指令

1. v-text

作用 : 操作元素中的純文字

快捷方式 : {{}}

栗子1

簡寫形式:將v-text=””換成{{}}


<div id="app">
{{ message }}
</div>
var app = new Vue({
el : '#app',
data : {
message : 'hello world'  
}
})

結果: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
}
})

結果:今天是2017年5月

等同於:<h1 id=”app1″>今天是{{year}}年{{month}}月</h1>

這裡v-text=””,雙引號並不是代表字串,而是vue自定義的劃定界限的符號。如果我們裡邊輸出字串,就要在裡邊再新增一對單引號。而且經測驗,要想輸出字串,必須新增單引號,否則會報錯
這裡month預設是從0開始的,所以我們要 1
這裡{{}}代表的就是””,所以在v-text=””中,我們在內容裡邊就不需要再寫{{}}了,直接寫data值就行

栗子3


<div id='app'>
<h1>{{ message }}</h1>
<h1>{{ message.concat('!!!') }}</h1>
<h1>{{ message? 'has message' : 'no message' }}</h1>
下面這兩個語句報錯
<h1>{{ var message = 'message' }}</h1>
<h1>{{ if(message){return info} }}</h1>  
</div>
var app = new Vue({
el : '#app',  // 繫結了上邊的id='app'的元素
data : {
message : 'hello'
}  
})

結果:

  hello
  hello!!!
  has message

第四五句報錯

大鬍子{{}}裡邊支援表示式

但不是所有的表示式都能放在裡邊,只有單個語句的可以,像var和if就不可以

如果想使用if語句的話,用三元運算子代替

栗子4

可以採用物件的形式傳遞多個資料


<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
}
}
})

結果:

 姓名 : 小明
 性別 : 男
 年齡 : 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)"
}
})

結果 : 成功顯示圖片

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'>
滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊!
</span>
</div>
var app2 = new Vue({
el : '#app2',
data : {
message : '頁面載入於'   new Date()
}
})

相關文章

前端開發 最新文章