Vue基本指令實例圖文講解

更新時間：2021年02月25日 12:04:21 作者：盛開的太陽

這篇文章主要介紹了Vue基本指令實例圖文講解，文章將基本指令講解的很清楚，有對于指令不太懂的同學(xué)可以跟著學(xué)習(xí)研究下

Vue (讀音 /vjuː/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復(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>

我們給按鈕綁定了點擊事件. v-on:click = "add"

v-on: 后面加時間名稱
需要指定綁定事件的事件名

來看看運行效果

2. 語法糖

我們知道, v-bind指令可以簡寫為:, 同樣v-on也可以簡寫, 簡寫為@, 如上寫法可以簡寫如下:

<button @click="add"> + </button>
<button @click="sub"> - </button>

3. 事件的參數(shù)

無參方法

上面的案例都是不帶參數(shù). 如果方法沒有參數(shù), 那么我們在調(diào)用的時候可以省略括號

add方法不帶參數(shù), 調(diào)用的時候可以有如下兩種寫法:

復(fù)制代碼 代碼如下:
<button @click="add"> + </button>或者<button @click="add()"> + </button>

兩種寫法都可.

有參方法

如果一個方法有參數(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ù).

<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)用方法的括號都省了.

這時會是什么效果呢?

可以看到, 這時不是undefined了, 而是一個MouseEvent鼠標(biāo)事件.

為什么呢? 其實, 當(dāng)鼠標(biāo)點擊按鈕的時候, 頁面會自動生成一個事件, 如果沒有傳遞參數(shù), 那么會自動將這個事件作為參數(shù)傳遞過了, 如果需要調(diào)用這個事件, 那么, 可以在方法入?yún)?顯示的接收event參數(shù).

調(diào)用方式3: 參數(shù)中既有普通參數(shù), 又有event參數(shù)

這是我們調(diào)用的時候, 要使用$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>

然后來看效果

同時將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里面有一個btn, div有一個click事件, btn也有一個click事件, 當(dāng)我們點擊btn的時候, 回調(diào)用兩個方法么?我們來看看效果

確實調(diào)用了btn的click()方法, 而且還調(diào)用了div的click()方法. 這是事件冒泡機制, 通常我們在頁面是要避免這樣的情況發(fā)生的. 所以會寫一個方法阻止事件冒泡.

但是在vue里面, 使用stop修飾符就可以解決這個問題. 在btn按鈕的click事件上增加stop修飾符

<div id="app" @click="divClick">
 <button @click.stop="btnClick">按鈕</button>
</div>

這樣就阻止了冒泡事件

prevent: 調(diào)用event.preventDefault() 阻止默認(rèn)事件

我們現(xiàn)在methods中定義一個方法

stopDefaultEventBtn(){
 console.log("stopDefaultEventBtn")
}

調(diào)用的時候, 我們定義一個submit表單提交按鈕, 我們知道表單有自己的提價時間, 點擊按鈕將跳轉(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)的提交時間, 而是使用我自定義的事件. -->
</div>

這時, 我們在調(diào)用方法, 發(fā)現(xiàn)不會自動跳轉(zhuǎn)到action指定的事件了, 而是進入到click事件.

但是有個問題, 雖然調(diào)用了click指定的事件, 但是依然有事件冒泡, 同時還調(diào)用和div的click事件, 這個簡單, 在增加阻止冒泡事件就可以了.

<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)的提交時間, 而是使用我自定義的事件. -->
</div>

(keyCode | keyAlias): 只當(dāng)事件是從特定鍵觸發(fā)時才觸發(fā)回調(diào)

我們來監(jiān)聽一個鍵盤的按鍵事件 --- 監(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的事件, 只有第一次點擊有反應(yīng), 后面點擊就沒有反應(yīng)了.

二. v-if指令

條件判斷, 有三個指令

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>

這個案例很簡單,就不說了. 有一點可以說, 就是通常只有兩種情況, 很簡單的兩種情況,我們會使用v-if, v-else. 如果情況很復(fù)雜, 不建議在代碼寫很多v-else-if, 因為可讀性差, 我們應(yīng)該吧條件判斷放到methods或者computed中進行計算, 最后返回結(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>

在這里, 我們定義了一個變量userLogin, 是否是用戶登錄, 默認(rèn)是true; 定義兩個label和一個button, 點擊切換按鈕, 來兩個label之間來回切換.效果如下圖

但是這里有個問題, 當(dāng)我們輸入內(nèi)容以后, 切換文本框的時候, 內(nèi)容卻不會消失. 如下圖

存在的問題: 切換了類型, 輸入的文字卻沒有被清空.

我們發(fā)現(xiàn), 在賬號登錄里面輸入了1234, 切換到郵箱登錄的時候, 卻沒有被清空. 這是兩個文本框, 但是值怎么被帶過來了呢?

原因

這是由于vue在進行dom渲染時, 考慮到性能問題, 會盡可能復(fù)用已經(jīng)存在的元素. 而不是每次都創(chuàng)建新的元素. 這就是vue的虛擬dom.

如上圖, 我們的dom元素, 之前都是直接渲染到瀏覽器頁面的. 但是增加了vue以后, vue會幫我們將dom元素先進行緩存, 緩存為虛擬dom.

當(dāng)我們使用v-if指令的時候, 兩個div的元素不可能同時執(zhí)行. 第一個div元素被渲染了以后, 在渲染第二個div的時候, 他發(fā)現(xiàn)有類似的元素, 那么vue就緩存一份. 當(dāng)執(zhí)行到else的時候, 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>

如果兩個key是一樣的, 那么就虛擬dom就緩存一份, 如果兩個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>

這兩個都是可以顯示出來, 我們設(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)實與隱藏切換的很頻繁的時候, 使用v-show
當(dāng)只有一次切換時, 使用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的時候, value寫在前面, key寫在后面

3. 組件的key屬性

官方推薦, 我們在使用v-for的時候, 應(yīng)該給對應(yīng)的元素添加一個:key屬性

為什么要添加key屬性呢?

詳細(xì)參考這篇文章:www.jianshu.com/p/4bd5e745ce95

增加了:key以后,會讓內(nèi)部的計算性能提高, 那么應(yīng)該怎么加呢?

<ul>
 <li v-for="item in students" :key="item">{{item}}</li>
</ul>

使用的時候, 如上示例: :key="item",

寫法: :key
值是什么? 這里的值必須是要可以和value一一對應(yīng)的. 所以, 我們這里直接設(shè)置為item. 如果設(shè)置為index可以么? 當(dāng)然不可以, 因為當(dāng)想數(shù)組中增減元素的時候, index就變化了

4. 數(shù)組中哪些方法是響應(yīng)式的

其實, 通常我們在遍歷數(shù)組, 修改數(shù)組的值的時候, 習(xí)慣于使用下標(biāo)修改.

如:

this.languages[0] = "aaaa";

但是, 我們看看,下標(biāo)修改在vue中會怎么樣呢?

我們發(fā)現(xiàn)修改了languages,但是頁面沒變化, 實際上確實是修改了

所以, 我們得出結(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可以進行
     * 1. 添加元素 splice(從第幾個元素開始, 0, "未來語言1", "未來語言2")
     * 2. 刪除元素 splice(從第幾個元素開始, 刪除幾個元素)
     * 3. 修改元素: 其實是刪除以后在添加 splice(從第幾個元素開始, 修改幾個元素, 修改的元素內(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)式的

通過測試, 這幾個方法都是響應(yīng)式的.

所以, 如果我們想要修改/刪除元素, 建議使用splice, 這樣可以立刻看到效果.

五. v-model指令

1. v-model的基本用法

v-model指令用來實現(xiàn)表單元素和數(shù)組元素的雙向綁定

在輸入框輸入內(nèi)容時, 會實時將輸入內(nèi)容傳遞給data數(shù)據(jù)
data數(shù)據(jù)發(fā)生變更, 也會實時同步給輸入框
雙向綁定

案例: 文本框輸入雙向同步

<!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>

我們定義了一個變量message, 然后在input輸入框中使用v-model="message"就可以和這個變量進行雙向綁定了

2. v-model的原理

其實v-model包含了兩個操作

一個是v-bind: 綁定data數(shù)據(jù)給input屬性
另一個是v-on: 調(diào)用輸入框的input事件, 實時修改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)將具有同一個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中, 這樣的好處是, 點擊文字也可以選中和取消. 如果不放在lable中,就必須選擇復(fù)選框.

2) checkbox復(fù)選框

復(fù)選框的值是一個數(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中定義了一個hobbies數(shù)組. 并且將這個數(shù)組綁定給checkbox付款框的每一項. 即可實現(xiàn)效果

區(qū)別:

單個復(fù)選框?qū)?yīng)的data是bool類型
多個復(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>

在使用多選的時候, 在select中增加一個multiple即可設(shè)置為多復(fù)選.

在數(shù)據(jù)中, 我們需要將其設(shè)置為一個數(shù)組. 如favoriteFrite:[]

下面來看看效果

總結(jié):

單選: 只能選中一個值, v-model綁定的是一個值
多選: 可以選中多個值, v-model綁定的是一個數(shù)組

6. v-model的修飾符

1. Lazy修飾符

默認(rèn)情況下, v-model是實時雙向同步的. 但有時候, 我們不希望他每次變化都實時響應(yīng), 那么, 可以使用lazy修飾符

v-model.lazy , 使用了lazy以后按回車或者文本框是去焦點即同步內(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修飾符

通常我們在寫一個只能輸入數(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修飾符

通常我們在文本框輸入文本的時候, 可能會誤輸入空格, 我們可以使用trim修飾符, 去掉文本框左右的空格

<input type="text" v-model.trim="name">

到此這篇關(guān)于Vue基本指令實例圖文講解的文章就介紹到這了,更多相關(guān)Vue基本指令內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue
指令

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片