Vue基本指令實(shí)例圖文講解
Vue (讀音 /vjuː/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動。
一. v-on指令
1. 基礎(chǔ)用法
v-on是事件監(jiān)聽的指令, 下面來看簡單用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{counter}}</h2>
<button v-on:click="add"> + </button>
<button v-on:click="sub"> - </button>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
counter: 0
},
methods: {
add() {
this.counter ++
},
sub() {
this.counter --
}
}
});
</script>
</body>
</html>
我們給按鈕綁定了點(diǎn)擊事件. v-on:click = "add"
- v-on: 后面加時(shí)間名稱
- 需要指定綁定事件的事件名
來看看運(yùn)行效果
2. 語法糖
我們知道, v-bind指令可以簡寫為:, 同樣v-on也可以簡寫, 簡寫為@, 如上寫法可以簡寫如下:
<button @click="add"> + </button> <button @click="sub"> - </button>
3. 事件的參數(shù)
- 無參方法
上面的案例都是不帶參數(shù). 如果方法沒有參數(shù), 那么我們在調(diào)用的時(shí)候可以省略括號
add方法不帶參數(shù), 調(diào)用的時(shí)候可以有如下兩種寫法:
復(fù)制代碼 代碼如下:<button @click="add"> + </button>或者<button @click="add()"> + </button>
兩種寫法都可.
- 有參方法
如果一個(gè)方法有參數(shù), 如下案例
<script>
var app = new Vue({
el: "#app",
data: {
num1: 10,
num2: 100
},
methods: {
print(message) {
console.log("打印" + message)
}
}
});
</script>
調(diào)用方式1: 那么調(diào)用的時(shí)候括號里不帶參數(shù).
<div id="app"> <button @click="print()"> 打印 </button> </div>
這是方法的參數(shù)傳入的是undefined.
調(diào)用方式2: 不帶括號
<div id="app"> <button @click="print"> 打印 </button> </div>
這里和方式1的區(qū)別是, 調(diào)用方法的括號都省了.
這時(shí)會是什么效果呢?
可以看到, 這時(shí)不是undefined了, 而是一個(gè)MouseEvent鼠標(biāo)事件.
為什么呢? 其實(shí), 當(dāng)鼠標(biāo)點(diǎn)擊按鈕的時(shí)候, 頁面會自動生成一個(gè)事件, 如果沒有傳遞參數(shù), 那么會自動將這個(gè)事件作為參數(shù)傳遞過了, 如果需要調(diào)用這個(gè)事件, 那么, 可以在方法入?yún)?顯示的接收event參數(shù).
調(diào)用方式3: 參數(shù)中既有普通參數(shù), 又有event參數(shù)
這是我們調(diào)用的時(shí)候, 要使用$event
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button @click="print"> button1 </button>
<button @click="print1('aaa')"> button2 </button>
<button @click="print1('aaa', $event)"> button3 </button>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
num1: 10,
num2: 100
},
methods: {
print(message) {
console.log("打印" + message)
},
print1(message, event){
console.log("打印" + event + ", message:" + message)
},
print2(message, event) {
console.log("event:" + event + ", message:" + message)
}
}
});
</script>
</body>
</html>
然后來看效果
同時(shí)將message和event都傳遞過來了
4. 事件修飾符
- stop : 調(diào)用event.stopPropagation() 阻止冒泡事件
看如下代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app" @click="divClick">
<button @click="btnClick">按鈕</button>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello"
},
methods:{
divClick(){
console.log("divClick")
},
btnClick(){
console.log("btnClick")
}
}
});
</script>
</body>
</html>
div里面有一個(gè)btn, div有一個(gè)click事件, btn也有一個(gè)click事件, 當(dāng)我們點(diǎn)擊btn的時(shí)候, 回調(diào)用兩個(gè)方法么?我們來看看效果
確實(shí)調(diào)用了btn的click()方法, 而且還調(diào)用了div的click()方法. 這是事件冒泡機(jī)制, 通常我們在頁面是要避免這樣的情況發(fā)生的. 所以會寫一個(gè)方法阻止事件冒泡.
但是在vue里面, 使用stop修飾符就可以解決這個(gè)問題. 在btn按鈕的click事件上增加stop修飾符
<div id="app" @click="divClick"> <button @click.stop="btnClick">按鈕</button> </div>
這樣就阻止了冒泡事件
- prevent: 調(diào)用event.preventDefault() 阻止默認(rèn)事件
我們現(xiàn)在methods中定義一個(gè)方法
stopDefaultEventBtn(){
console.log("stopDefaultEventBtn")
}
調(diào)用的時(shí)候, 我們定義一個(gè)submit表單提交按鈕, 我們知道表單有自己的提價(jià)時(shí)間, 點(diǎn)擊按鈕將跳轉(zhuǎn)到form表單指定的action地址.
<div id="app" @click="divClick"> <button @click.stop="btnClick">阻止冒泡事件</button><br/><br/> <form action="http://www.baidu.com"> <input type = "submit" value="阻止默認(rèn)事件"></input> </form> </div>
現(xiàn)在我們不想使用submit的自動提交事件, 我們要阻止他, 而是使用我么自定義的stopDefaultEventBtn事件.
<div id="app" @click="divClick"> <button @click.stop="btnClick">阻止冒泡事件</button><br/><br/> <form action="http://www.baidu.com"> <input type = "submit" @click.prevent="stopDefaultEventBtn" value="阻止默認(rèn)事件"></input> </form> <!-- submit 有自己的模式提交事件, 但通常我們不希望使用默認(rèn)的提交時(shí)間, 而是使用我自定義的事件. --> </div>
這時(shí), 我們在調(diào)用方法, 發(fā)現(xiàn)不會自動跳轉(zhuǎn)到action指定的事件了, 而是進(jìn)入到click事件.
但是有個(gè)問題, 雖然調(diào)用了click指定的事件, 但是依然有事件冒泡, 同時(shí)還調(diào)用和div的click事件, 這個(gè)簡單, 在增加阻止冒泡事件就可以了.
<div id="app" @click="divClick"> <button @click.stop="btnClick">阻止冒泡事件</button><br/><br/> <form action="http://www.baidu.com"> <input type = "submit" @click.prevent.stop="stopDefaultEventBtn" value="阻止默認(rèn)事件"></input> </form> <!-- submit 有自己的模式提交事件, 但通常我們不希望使用默認(rèn)的提交時(shí)間, 而是使用我自定義的事件. --> </div>
- (keyCode | keyAlias): 只當(dāng)事件是從特定鍵觸發(fā)時(shí)才觸發(fā)回調(diào)
我們來監(jiān)聽一個(gè)鍵盤的按鍵事件 --- 監(jiān)聽鍵盤上回車按鈕的按鍵事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" @keyup.enter="keyup" /><br/><br/>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello"
},
methods:{
keyup() {
console.log("keyup")
}
}
});
</script>
</body>
</html>
@keyup.enter="keyup" 在keyup事件后面增加.enter即可
- once: 只觸發(fā)一次回調(diào)
增加了 .once的事件, 只有第一次點(diǎn)擊有反應(yīng), 后面點(diǎn)擊就沒有反應(yīng)了.
二. v-if指令
條件判斷, 有三個(gè)指令
- v-if
- v-else-if
- v-else
來看案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 我們開發(fā)過程中通常會遇到狀態(tài), 1:表示啟用, 2:表示禁用 3: 表示刪除-->
<div id="app">
<h2 v-if = "status == 1"> 啟用 </h2>
<h2 v-else-if = "status == 2"> 禁用 </h2>
<h2 v-else> 刪除 </h2>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
status: 1
}
});
</script>
</body>
</html>
這個(gè)案例很簡單,就不說了. 有一點(diǎn)可以說, 就是通常只有兩種情況, 很簡單的兩種情況,我們會使用v-if, v-else. 如果情況很復(fù)雜, 不建議在代碼寫很多v-else-if, 因?yàn)榭勺x性差, 我們應(yīng)該吧條件判斷放到methods或者computed中進(jìn)行計(jì)算, 最后返回結(jié)果.
案例: 登錄界面使用賬號登錄和郵箱登錄的切換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 我們開發(fā)過程中通常會遇到狀態(tài), 1:表示啟用, 2:表示禁用 3: 表示刪除-->
<div id="app">
<label v-if="userLogin">賬號登錄
<input type="text" placeholder="請輸入賬號">
</label>
<label v-else>郵箱登錄
<input type="text" placeholder="請輸入郵箱">
</label>
<button @click="userLogin = !userLogin" >切換</button>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
userLogin: true
}
});
</script>
</body>
</html>
在這里, 我們定義了一個(gè)變量userLogin, 是否是用戶登錄, 默認(rèn)是true; 定義兩個(gè)label和一個(gè)button, 點(diǎn)擊切換按鈕, 來兩個(gè)label之間來回切換.效果如下圖
但是這里有個(gè)問題, 當(dāng)我們輸入內(nèi)容以后, 切換文本框的時(shí)候, 內(nèi)容卻不會消失. 如下圖
- 存在的問題: 切換了類型, 輸入的文字卻沒有被清空.
我們發(fā)現(xiàn), 在賬號登錄里面輸入了1234, 切換到郵箱登錄的時(shí)候, 卻沒有被清空. 這是兩個(gè)文本框, 但是值怎么被帶過來了呢?
- 原因
這是由于vue在進(jìn)行dom渲染時(shí), 考慮到性能問題, 會盡可能復(fù)用已經(jīng)存在的元素. 而不是每次都創(chuàng)建新的元素. 這就是vue的虛擬dom.
如上圖, 我們的dom元素, 之前都是直接渲染到瀏覽器頁面的. 但是增加了vue以后, vue會幫我們將dom元素先進(jìn)行緩存, 緩存為虛擬dom.
當(dāng)我們使用v-if指令的時(shí)候, 兩個(gè)div的元素不可能同時(shí)執(zhí)行. 第一個(gè)div元素被渲染了以后, 在渲染第二個(gè)div的時(shí)候, 他發(fā)現(xiàn)有類似的元素, 那么vue就緩存一份. 當(dāng)執(zhí)行到else的時(shí)候, vue判斷元素一樣, 只是部分內(nèi)容不同, 那就渲染不同的部分,相同的不會修改. 而我們輸入的內(nèi)容, 不在比較的范圍內(nèi), 所以, 會被帶過去.
- 如何避免這種情況呢? 使用屬性key
<div id="app"> <label v-if="userLogin">賬號登錄 <input type="text" placeholder="請輸入賬號" key="user"> </label> <label v-else>郵箱登錄 <input type="text" placeholder="請輸入郵箱" key="email"> </label> <button @click="userLogin = !userLogin" >切換</button> </div>
如果兩個(gè)key是一樣的, 那么就虛擬dom就緩存一份, 如果兩個(gè)key是不同的, 那么虛擬dom就會緩存兩份. 來看看這次的效果
三. v-show指令
v-show很簡單, 就是隱藏/顯示元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 我們開發(fā)過程中通常會遇到狀態(tài), 1:表示啟用, 2:表示禁用 3: 表示刪除-->
<div id="app">
<h2 v-if = "isShow"> 啟用 </h2>
<h2 v-show = "isShow"> 啟用 </h2>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isShow: true
}
});
</script>
</body>
</html>
這兩個(gè)都是可以顯示出來, 我們設(shè)置isShow=false, 都隱藏了,但隱藏的結(jié)果是不同的. 我們來看看html代碼
我們發(fā)現(xiàn)代碼里只有useShow對象, 并且增加了display:none樣式, 而沒有useIf對象. 也就是被直接刪除了
總結(jié): v-if和v-show的區(qū)別
- v-if: true: 添加元素, false: 刪除元素
- v-show: true: 增加樣式display:block; false: 修改樣式display:none
那么如何選擇呢?
- 當(dāng)現(xiàn)實(shí)與隱藏切換的很頻繁的時(shí)候, 使用v-show
- 當(dāng)只有一次切換時(shí), 使用v-if
四. v-for指令
遍歷有遍歷數(shù)組, 遍歷對象兩種形式
1. 遍歷數(shù)組
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in languages">{{item}}</li>
<li v-for="(item, index) in languages"> {{index}}--{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
languages: ["java", "php", "python"]
}
});
</script>
</body>
</html>
遍歷數(shù)組如果不帶下標(biāo), 可以這么寫
<li v-for="item in languages">{{item}}</li>
如果帶有下標(biāo), 可以這么寫
<li v-for="(item, index) in languages"> {{index}}--{{item}}</li>
2. 遍歷對象
遍歷對象有三種方式
- 只顯示對象的value
- 顯示對象的key和value
- 顯示對象的index, key和value
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="app">
<p> 只顯示對象的value </p>
<ul>
<li v-for="item in students">{{item}}</li>
</ul>
<p> 顯示對象的key 和 value </p>
<ul>
<li v-for="(value, key) in students">{{key}} -- {{value}}</li>
</ul>
<p> 顯示對象的編號 </p>
<ul>
<li v-for="(value, key, index) in students">{{index}} -- {{key}} -- {{value}} </li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
students: {
name: "zhangsan",
age: 20,
sex: "male"
}
}
});
</script>
</body>
</html>
具體寫法如上圖. 需要注意的是, 當(dāng)顯示key和value的時(shí)候, value寫在前面, key寫在后面
3. 組件的key屬性
官方推薦, 我們在使用v-for的時(shí)候, 應(yīng)該給對應(yīng)的元素添加一個(gè):key屬性
為什么要添加key屬性呢?
詳細(xì)參考這篇文章:www.jianshu.com/p/4bd5e745ce95
增加了:key以后,會讓內(nèi)部的計(jì)算性能提高, 那么應(yīng)該怎么加呢?
<ul>
<li v-for="item in students" :key="item">{{item}}</li>
</ul>
使用的時(shí)候, 如上示例: :key="item",
- 寫法: :key
- 值是什么? 這里的值必須是要可以和value一一對應(yīng)的. 所以, 我們這里直接設(shè)置為item. 如果設(shè)置為index可以么? 當(dāng)然不可以, 因?yàn)楫?dāng)想數(shù)組中增減元素的時(shí)候, index就變化了
4. 數(shù)組中哪些方法是響應(yīng)式的
其實(shí), 通常我們在遍歷數(shù)組, 修改數(shù)組的值的時(shí)候, 習(xí)慣于使用下標(biāo)修改.
如:
this.languages[0] = "aaaa";
但是, 我們看看,下標(biāo)修改在vue中會怎么樣呢?
我們發(fā)現(xiàn)修改了languages,但是頁面沒變化, 實(shí)際上確實(shí)是修改了
所以, 我們得出結(jié)論: 直接通過下標(biāo)修改元素, 是非響應(yīng)式的.
那么數(shù)組的其他方法呢?看下面的案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in languages"> {{index}}--{{item}}</li>
</ul>
<br><br/><br/><br/><br/>
<button @click="pushMethod">push</button>
<button @click="popMethod">pop</button>
<button @click="shiftMethod">shift</button>
<button @click="unShiftMethod">unshift</button>
<button @click="updateElement"></button>
<button @click="spliceMethod">splice</button>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
languages: ["java", "php", "python", "go", "c語言"]
},
methods: {
pushMethod() {
this.languages.push("其他語言")
},
popMethod() {
this.languages.pop()
},
shiftMethod() {
this.languages.shift()
},
unShiftMethod() {
this.languages.unshift("其他語言")
},
updateElement(){
this.languages[0] = "aaaa";
},
spliceMethod() {
/**
* splice可以進(jìn)行
* 1. 添加元素 splice(從第幾個(gè)元素開始, 0, "未來語言1", "未來語言2")
* 2. 刪除元素 splice(從第幾個(gè)元素開始, 刪除幾個(gè)元素)
* 3. 修改元素: 其實(shí)是刪除以后在添加 splice(從第幾個(gè)元素開始, 修改幾個(gè)元素, 修改的元素內(nèi)容)
*/
// 刪除元素
//this.languages.splice(1, 1)
// 修改元素
//this.languages.splice(1, 2, "pthoon語言", "go語言")
// 添加元素
this.languages.splice(1, 0, "未來語言1", "未來語言2")
}
}
});
</script>
</body>
</html>
- push(從尾部添加元素---響應(yīng)式的
- pop : 從尾部刪除元素---響應(yīng)式的
- shift : 從頂部刪除元素---響應(yīng)式的
- unshift : 從頂部添加元素---響應(yīng)式的
- splice : 添加元素, 修改元素, 刪除元素---響應(yīng)式的
通過測試, 這幾個(gè)方法都是響應(yīng)式的.
所以, 如果我們想要修改/刪除元素, 建議使用splice, 這樣可以立刻看到效果.
五. v-model指令
1. v-model的基本用法
v-model指令用來實(shí)現(xiàn)表單元素和數(shù)組元素的雙向綁定
- 在輸入框輸入內(nèi)容時(shí), 會實(shí)時(shí)將輸入內(nèi)容傳遞給data數(shù)據(jù)
- data數(shù)據(jù)發(fā)生變更, 也會實(shí)時(shí)同步給輸入框
- 雙向綁定
案例: 文本框輸入雙向同步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<form>
<input type="text" placeholder="請輸入" v-model="message">
</form>
message的內(nèi)容是:{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
message: "hello"
}
});
</script>
</body>
</html>
我們定義了一個(gè)變量message, 然后在input輸入框中使用v-model="message"就可以和這個(gè)變量進(jìn)行雙向綁定了
2. v-model的原理
其實(shí)v-model包含了兩個(gè)操作
- 一個(gè)是v-bind: 綁定data數(shù)據(jù)給input屬性
- 另一個(gè)是v-on: 調(diào)用輸入框的input事件, 實(shí)時(shí)修改data數(shù)據(jù)
案例: 模擬v-model的兩步操作
首先, 我們知道讓文本框顯示data中message的值, 可以直接使用v-bind:value, 這樣我們修改了message的值, 文本框自動響應(yīng)
<input type="text" placeholder="請輸入" :value="message">
這是將數(shù)據(jù)響應(yīng)給文本框. 那么, 如何將文本框修改的內(nèi)容,同步給數(shù)據(jù)呢? 使用文本框的輸入事件: v-on:input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" placeholder="請輸入" :value="message" @input="change">
<p>message的內(nèi)容是:{{message}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
let app = new Vue({
el: "#app",
data: {
message: "hello"
},
methods: {
change(event) {
this.message = event.target.value;
}
}
});
</script>
</body>
</html>
這里使用了@input給文本框綁定了input事件, change()方法沒有加括號, 會自動將默認(rèn)的參數(shù)event傳過去, 如果想要顯示的設(shè)置event參數(shù), 可以試用@input="change($event)".
然后在change方法中, 設(shè)置this.message=event.target.value;
結(jié)論:
<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message=$event.target.value">
2. v-model在radio中的使用
案例: 性別選擇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<form>
<input type="radio" name="sex" id="male" value="男" v-model="sex">男
<input type="radio" name="sex" id="female" value="女" v-model="sex">女
</form>
當(dāng)前選中的是: {{sex}}
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello",
sex: "男"
}
});
</script>
</body>
</html>
使用了v-model以后, 就可以不使用name屬性了, 默認(rèn)將具有同一個(gè)v-model值的radio作為一組
3. v-model在checkbox中的使用
1) checkbox單選框
案例: 是否同意協(xié)議
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<label for="agreeContent">
<input type="checkbox" name="agreeContent" id="agreeContent" value="同意協(xié)議" v-model="agreeContent">統(tǒng)一協(xié)議
<br/>當(dāng)前選中的是: {{agreeContent}}
</label>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello",
agreeContent: false
}
});
</script>
</body>
</html>
是否同意協(xié)議: data數(shù)據(jù)中agreeContent: 值是true或者false. true表示選中文本框, false表示取消選中
注意: label的好處
input被包在了label中, 這樣的好處是, 點(diǎn)擊文字也可以選中和取消. 如果不放在lable中,就必須選擇復(fù)選框.
2) checkbox復(fù)選框
復(fù)選框的值是一個(gè)數(shù)組
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>單選框</h2>
<label for="agreeContent">
<input type="checkbox" name="agreeContent" id="agreeContent" value="同意協(xié)議" v-model="agreeContent">同意協(xié)議
<br/>當(dāng)前選中的是: {{agreeContent}}
</label>
<br/><br/><br/><br/><br/>
<h2>復(fù)選框</h2>
<form>
<input type="checkbox" name = "hobby" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" name = "hobby" value="籃球" v-model="hobbies">籃球
<input type="checkbox" name = "hobby" value="足球" v-model="hobbies">足球
<input type="checkbox" name = "hobby" value="排球" v-model="hobbies">排球
<br/>當(dāng)前選中的愛好是: {{hobbies}}
</form>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello",
agreeContent: false,
hobbies:[]
}
});
</script>
</body>
</html>
在data中定義了一個(gè)hobbies數(shù)組. 并且將這個(gè)數(shù)組綁定給checkbox付款框的每一項(xiàng). 即可實(shí)現(xiàn)效果
區(qū)別:
- 單個(gè)復(fù)選框?qū)?yīng)的data是bool類型
- 多個(gè)復(fù)選框?qū)?yīng)的data是數(shù)組類型
4. v-model在select中的使用
1) select單選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<select v-model="selectOne">
<option id="apple" value="蘋果" >蘋果</option>
<option id="banana" value="香蕉" >香蕉</option>
<option id="strawberry" value="草莓" >草莓</option>
<option id="grape" value="葡萄" >葡萄</option>
</select>
<br/>
<p>當(dāng)前選中的是: {{selectOne}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello",
sex: "男",
selectOne:"蘋果"
}
});
</script>
</body>
</html>
注意: 在select單選下拉框中, v-model要寫在select元素上
2) select多選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<br/>
<br/>
<br/>
<select v-model="favoriteFrite" multiple>
<option id="apple" value="蘋果" >蘋果</option>
<option id="banana" value="香蕉" >香蕉</option>
<option id="strawberry" value="草莓" >草莓</option>
<option id="grape" value="葡萄" >葡萄</option>
</select>
<br/>
<p>當(dāng)前選中的是: {{favoriteFrite}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello",
favoriteFrite:[]
}
});
</script>
</body>
</html>
在使用多選的時(shí)候, 在select中增加一個(gè)multiple即可設(shè)置為多復(fù)選.
在數(shù)據(jù)中, 我們需要將其設(shè)置為一個(gè)數(shù)組. 如favoriteFrite:[]
下面來看看效果
總結(jié):
- 單選: 只能選中一個(gè)值, v-model綁定的是一個(gè)值
- 多選: 可以選中多個(gè)值, v-model綁定的是一個(gè)數(shù)組
6. v-model的修飾符
1. Lazy修飾符
默認(rèn)情況下, v-model是實(shí)時(shí)雙向同步的. 但有時(shí)候, 我們不希望他每次變化都實(shí)時(shí)響應(yīng), 那么, 可以使用lazy修飾符
v-model.lazy , 使用了lazy以后按回車或者文本框是去焦點(diǎn)即同步內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model.lazy="message"/>
<p>message的內(nèi)容是:{{message}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello",
count: 0,
name:"zhangsan"
}
});
</script>
</body>
</html>
看效果
2. number修飾符
通常我們在寫一個(gè)只能輸入數(shù)字的文本框時(shí), 會這么寫<input type="number" v-model = "count">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="number" v-model = "count">
<p>count的類型: {{count}} --- {{typeof count}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "hello",
count: 0,
name:"zhangsan"
}
});
</script>
</body>
</html>
但這么寫獲取到的count值是什么類型呢? 我們使用{{typeof count}}來看看count的類型. 如下圖
我們看到count的類型是String. 而不是number類型
如何才能讓count是number類型呢? 使用v-model.number="count", 如下圖:
<input type="number" v-model.number = "count">
3. trim修飾符
通常我們在文本框輸入文本的時(shí)候, 可能會誤輸入空格, 我們可以使用trim修飾符, 去掉文本框左右的空格
<input type="text" v-model.trim="name">
到此這篇關(guān)于Vue基本指令實(shí)例圖文講解的文章就介紹到這了,更多相關(guān)Vue基本指令內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Antd表格滾動 寬度自適應(yīng) 不換行的實(shí)例
這篇文章主要介紹了Antd表格滾動 寬度自適應(yīng) 不換行的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了如何用vite打包解決前端發(fā)版后瀏覽器緩存問題的相關(guān)資料,這樣的配置能夠有效避免瀏覽器緩存問題,確保瀏覽器每次都能加載最新的代碼,同時(shí)又不影響第三方庫的緩存效果,需要的朋友可以參考下2024-11-11
這篇文章主要為大家詳細(xì)介紹了vue+canvas繪制時(shí)間軸的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
vue+element?tree懶加載更新數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue+element?tree懶加載更新數(shù)據(jù),文中給大家補(bǔ)充介紹了Vue Element Ui 樹形表懶加載新增、修改、刪除等操作后局部數(shù)據(jù)更新的詳細(xì)代碼，感興趣的朋友跟隨小編一起看看吧2022-09-09
Vue中 Runtime + Compiler 和 Runtime-o
這篇文章主要介紹了Vue中 Runtime + Compiler 和 Runtime-only 兩種模式含義和區(qū)別,結(jié)合實(shí)例形式詳細(xì)分析了Vue中 Runtime + Compiler 和 Runtime-only 兩種模式基本功能、原理、區(qū)別與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-06-06
在vue項(xiàng)目中,和后臺交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,它是基于promise的http庫,下面這篇文章主要給大家介紹了關(guān)于Vue3引入axios封裝接口的兩種方法,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue3子組件數(shù)據(jù)無法更新問題及解決,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue2?使用echarts實(shí)現(xiàn)地圖點(diǎn)擊進(jìn)入下一層級+點(diǎn)擊空白處回退功能
這篇文章主要介紹了vue2?使用echarts實(shí)現(xiàn)地圖點(diǎn)擊進(jìn)入下一層級+點(diǎn)擊空白處回退,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue使用element-ui的el-image的問題分析,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
有很多關(guān)于vue的todolist小程序，這篇文章主要介紹了 用vue寫todolist單頁應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12