溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×

忘記密碼？

登錄注冊×

獲取短信驗證碼

其他方式登錄

點擊登錄注冊即表示同意《億速云用戶服務條款》

用戶登錄×

賬戶密碼登錄

請使用微信掃描上方二維碼

使用幫助

請求超時！

請點擊重新獲取二維碼

Vue中有哪些基本的指令

發布時間：2021-02-25 16:20:03 來源：億速云閱讀：243 作者：Leah 欄目：開發技術

Vue中有哪些基本的指令？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

一. v-on指令

1. 基礎用法

v-on是事件監聽的指令, 下面來看簡單用法

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <h3>{{counter}}</h3>
 <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: 后面加時間名稱
需要指定綁定事件的事件名

來看看運行效果

Vue中有哪些基本的指令

2. 語法糖

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

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

3. 事件的參數

無參方法

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

add方法不帶參數, 調用的時候可以有如下兩種寫法:

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

兩種寫法都可.

有參方法

如果一個方法有參數, 如下案例

<script>
 var app = new Vue({
  el: "#app",
  data: {
   num1: 10,
   num2: 100
  },
  methods: {
   print(message) {
    console.log("打印" + message)
   }
  }
 });
</script>

調用方式1: 那么調用的時候括號里不帶參數.

<div id="app">
 <button @click="print()"> 打印 </button>
</div>

這是方法的參數傳入的是undefined.

Vue中有哪些基本的指令

調用方式2: 不帶括號

<div id="app">
 <button @click="print"> 打印 </button>
</div>

這里和方式1的區別是, 調用方法的括號都省了.

這時會是什么效果呢?

Vue中有哪些基本的指令

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

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

調用方式3: 參數中既有普通參數, 又有event參數

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

然后來看效果

Vue中有哪些基本的指令

同時將message和event都傳遞過來了

4. 事件修飾符

stop : 調用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事件, 當我們點擊btn的時候, 回調用兩個方法么?我們來看看效果

Vue中有哪些基本的指令

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

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

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

這樣就阻止了冒泡事件

Vue中有哪些基本的指令

prevent: 調用event.preventDefault() 阻止默認事件

我們現在methods中定義一個方法

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

調用的時候, 我們定義一個submit表單提交按鈕, 我們知道表單有自己的提價時間, 點擊按鈕將跳轉到form表單指定的action地址.

<div id="app" @click="divClick">
 <button @click.stop="btnClick">阻止冒泡事件</button><br/><br/>
 <form action="http://www.baidu.com">
  <input type = "submit" value="阻止默認事件"></input>
 </form>
</div>

現在我們不想使用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="阻止默認事件"></input>
 </form>
 <!-- submit 有自己的模式提交事件, 但通常我們不希望使用默認的提交時間, 而是使用我自定義的事件. -->
</div>

這時, 我們在調用方法, 發現不會自動跳轉到action指定的事件了, 而是進入到click事件.

Vue中有哪些基本的指令

但是有個問題, 雖然調用了click指定的事件, 但是依然有事件冒泡, 同時還調用和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="阻止默認事件"></input>
 </form>
 <!-- submit 有自己的模式提交事件, 但通常我們不希望使用默認的提交時間, 而是使用我自定義的事件. -->
</div>

(keyCode | keyAlias): 只當事件是從特定鍵觸發時才觸發回調

我們來監聽一個鍵盤的按鍵事件 --- 監聽鍵盤上回車按鈕的按鍵事件

<!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: 只觸發一次回調

增加了 .once的事件, 只有第一次點擊有反應, 后面點擊就沒有反應了.

二. v-if指令

條件判斷, 有三個指令

v-if
v-else-if
v-else

來看案例

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<!-- 我們開發過程中通常會遇到狀態, 1:表示啟用, 2:表示禁用 3: 表示刪除-->
<div id="app">
 <h3 v-if = "status == 1"> 啟用 </h3>
 <h3 v-else-if = "status == 2"> 禁用 </h3>
 <h3 v-else> 刪除 </h3>
 
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   status: 1
  }
 });
</script>
</body>
</html>

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

案例: 登錄界面使用賬號登錄和郵箱登錄的切換

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<!-- 我們開發過程中通常會遇到狀態, 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, 是否是用戶登錄, 默認是true; 定義兩個label和一個button, 點擊切換按鈕, 來兩個label之間來回切換.效果如下圖

Vue中有哪些基本的指令

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

Vue中有哪些基本的指令

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

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

原因

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

Vue中有哪些基本的指令

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

當我們使用v-if指令的時候, 兩個div的元素不可能同時執行. 第一個div元素被渲染了以后, 在渲染第二個div的時候, 他發現有類似的元素, 那么vue就緩存一份. 當執行到else的時候, vue判斷元素一樣, 只是部分內容不同, 那就渲染不同的部分,相同的不會修改. 而我們輸入的內容, 不在比較的范圍內, 所以, 會被帶過去.

如何避免這種情況呢? 使用屬性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就會緩存兩份. 來看看這次的效果

Vue中有哪些基本的指令

三. v-show指令

v-show很簡單, 就是隱藏/顯示元素

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<!-- 我們開發過程中通常會遇到狀態, 1:表示啟用, 2:表示禁用 3: 表示刪除-->
<div id="app">
 <h3 v-if = "isShow"> 啟用 </h3>
 <h3 v-show = "isShow"> 啟用 </h3>
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   isShow: true
  }
 });
</script>
</body>
</html>

Vue中有哪些基本的指令

這兩個都是可以顯示出來, 我們設置isShow=false, 都隱藏了,但隱藏的結果是不同的. 我們來看看html代碼

Vue中有哪些基本的指令

我們發現代碼里只有useShow對象, 并且增加了display:none樣式, 而沒有useIf對象. 也就是被直接刪除了

總結: v-if和v-show的區別

v-if: true: 添加元素, false: 刪除元素
v-show: true: 增加樣式display:block; false: 修改樣式display:none

那么如何選擇呢?

當現實與隱藏切換的很頻繁的時候, 使用v-show
當只有一次切換時, 使用v-if

四. v-for指令

遍歷有遍歷數組, 遍歷對象兩種形式

1. 遍歷數組

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

遍歷數組如果不帶下標, 可以這么寫

<li v-for="item in languages">{{item}}</li>

Vue中有哪些基本的指令

如果帶有下標, 可以這么寫

<li v-for="(item, index) in languages"> {{index}}--{{item}}</li>

Vue中有哪些基本的指令

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>

具體寫法如上圖. 需要注意的是, 當顯示key和value的時候, value寫在前面, key寫在后面

Vue中有哪些基本的指令

3. 組件的key屬性

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

為什么要添加key屬性呢?

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

增加了:key以后,會讓內部的計算性能提高, 那么應該怎么加呢?

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

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

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

4. 數組中哪些方法是響應式的

其實, 通常我們在遍歷數組, 修改數組的值的時候, 習慣于使用下標修改.

如:

this.languages[0] = "aaaa";

但是, 我們看看,下標修改在vue中會怎么樣呢?

Vue中有哪些基本的指令

我們發現修改了languages,但是頁面沒變化, 實際上確實是修改了

所以, 我們得出結論: 直接通過下標修改元素, 是非響應式的.

那么數組的其他方法呢?看下面的案例

<!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(從第幾個元素開始, 修改幾個元素, 修改的元素內容)
     */
    // 刪除元素
    //this.languages.splice(1, 1)
    // 修改元素
     //this.languages.splice(1, 2, "pthoon語言", "go語言")
    // 添加元素
    this.languages.splice(1, 0, "未來語言1", "未來語言2")

   }
  }
 });
</script>
</body>
</html>

push(從尾部添加元素---響應式的
pop : 從尾部刪除元素---響應式的
shift : 從頂部刪除元素---響應式的
unshift : 從頂部添加元素---響應式的
splice : 添加元素, 修改元素, 刪除元素---響應式的

通過測試, 這幾個方法都是響應式的.

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

五. v-model指令

1. v-model的基本用法

v-model指令用來實現表單元素和數組元素的雙向綁定

在輸入框輸入內容時, 會實時將輸入內容傳遞給data數據
data數據發生變更, 也會實時同步給輸入框
雙向綁定

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

<!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的內容是:{{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"就可以和這個變量進行雙向綁定了

Vue中有哪些基本的指令

2. v-model的原理

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

一個是v-bind: 綁定data數據給input屬性
另一個是v-on: 調用輸入框的input事件, 實時修改data數據

案例: 模擬v-model的兩步操作

首先, 我們知道讓文本框顯示data中message的值, 可以直接使用v-bind:value, 這樣我們修改了message的值, 文本框自動響應

<input type="text" placeholder="請輸入" :value="message">

這是將數據響應給文本框. 那么, 如何將文本框修改的內容,同步給數據呢? 使用文本框的輸入事件: 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的內容是:{{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()方法沒有加括號, 會自動將默認的參數event傳過去, 如果想要顯示的設置event參數, 可以試用@input="change($event)".

然后在change方法中, 設置this.message=event.target.value;

結論:

<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>
 當前選中的是: {{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屬性了, 默認將具有同一個v-model值的radio作為一組

Vue中有哪些基本的指令

3. v-model在checkbox中的使用

1) checkbox單選框

案例: 是否同意協議

<!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="同意協議" v-model="agreeContent">統一協議
 　　<br/>當前選中的是: {{agreeContent}}
 </label>
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",
  data: {
   message: "hello",
   agreeContent: false
  }
 });
</script>
</body>
</html>

是否同意協議: data數據中agreeContent: 值是true或者false. true表示選中文本框, false表示取消選中

注意: label的好處

input被包在了label中, 這樣的好處是, 點擊文字也可以選中和取消. 如果不放在lable中,就必須選擇復選框.

2) checkbox復選框

復選框的值是一個數組

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div id="app">
 <h3>單選框</h3>
 <label for="agreeContent">
 <input type="checkbox" name="agreeContent" id="agreeContent" value="同意協議" v-model="agreeContent">同意協議
 <br/>當前選中的是: {{agreeContent}}
 </label>
 <br/><br/><br/><br/><br/>
 <h3>復選框</h3>
 <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/>當前選中的愛好是: {{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數組. 并且將這個數組綁定給checkbox付款框的每一項. 即可實現效果

Vue中有哪些基本的指令

區別:

單個復選框對應的data是bool類型
多個復選框對應的data是數組類型

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>當前選中的是: {{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元素上

Vue中有哪些基本的指令

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>當前選中的是: {{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即可設置為多復選.

在數據中, 我們需要將其設置為一個數組. 如favoriteFrite:[]

下面來看看效果

Vue中有哪些基本的指令

總結:

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

6. v-model的修飾符

1. Lazy修飾符

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

v-model.lazy , 使用了lazy以后按回車或者文本框是去焦點即同步內容

<!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的內容是:{{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>

看效果

Vue中有哪些基本的指令

2. number修飾符

通常我們在寫一個只能輸入數字的文本框時, 會這么寫<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的類型. 如下圖

Vue中有哪些基本的指令

我們看到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">

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。

向AI問一下細節

推薦閱讀：

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

上一篇新聞：
如何在python中利用pygame實現一個憤怒的小鳥游戲
下一篇新聞：
使用JavaScript怎么模仿一個京東輪播圖效果

猜你喜歡

AI
助
手

產品服務

地區劃分

專題活動

幫助支持

關于我們

售后咨詢

7*24小時在線電話：400-100-2938

7*24小時在線 QQ：800811969

關注億速云

億速云公眾號

手機網站二維碼

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女