2. 程式人生 > 程式設計 >Vue基本指令例項圖文講解

Vue基本指令例項圖文講解

阿新 • • 發佈：2021-02-27

vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

一. v-on指令

1. 基礎用法

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

<!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: 後面加時間名稱
  • 需要指定繫結事件的事件名

來看看執行效果

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: 引數中既有普通引數,又有eve程式設計客棧nt引數

這是我們呼叫的時候,要使用$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",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",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">
 <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. 如果情況很複雜,不建議在程式碼寫很多v-else-if,因為可讀性差,我們應該吧條件判斷放到methods或者computed中進行計算,最後返回結果.

案例: 登入介面使用賬號登入和郵箱登入的切換

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<!-- 我們開發過程中通常會遇到狀態,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>
<!-- 我們開發過程中通常會遇到狀態,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>

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(從第幾個元素開始,"未來語言1","未來語言2")
     * 2. 刪除元素 splice(從第幾個元素開始,刪除幾個元素)
     * 3. 修改元素: 其實是刪除以後在新增 splice(從第幾個元素開始,修改幾個元素,修改的元素內容)
     */
    // 刪除元素
    //this.languages.splice(1,1)
    // 修改元素
     //this.languages.splice(1,2,"pthoon語言","go語言")
    // 新增元素
    this.languages.splice(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",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: "男"
  }
 });
</scrihttp://www.cppcns.compt>
</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",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">
 <h2>單選框</h2>
 <label for="agreeContent">
 <input type="checkbox" name="agreeContent" id="agreeContent" value="同意協議" v-model="agreeContent">同意協議
 <br/>當前選中的是: {{agreeContent}}
 </label>
 <br/><br/><br/><br/><br/>
 <h2>複選框</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/>當前選中的愛好是: {{hobbies}}
 </form>
</div>

<script src="../js/vue.js"></script>
<script>
 var app = new Vue({
  el: "#app",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&ItcVBEhsDgt;
 <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",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",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",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",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">

Vue基本指令例項圖文講解

3. trim修飾符

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

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

到此這篇關於Vue基本指令例項圖文講解的文章就介紹到這了,更多相關Vue基本指令內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

相關推薦

Vue基本指令例項圖文講解

vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整

vue基本指令

v-bind基礎使用 動態地繫結一個或多個 屬性，或者繫結一個元件 prop 到表示式。

02-vue基本指令

1、v-cloak 解決插值表示式的閃爍問題 2、v-text 文字，沒有閃爍問題 3、v-html 會解析文字內容

VUE基本指令v-html、v-text、v-cloak、v-once、v-pro、v-on

技術標籤：VUEvue 1、v-html、v-text、{{}} 上面三種都是渲染文字的方法，使用場景的區別

vue基本指令與腳手架基本配置

腳手架(@vue/cli)建立專案啟動服務 1、建立專案 vue create 專案名字 2、啟動專案 進入專案根目錄，執行以下命令

Vue學習之常用指令例項詳解

本文例項講述了Vue常用指令。分享給大家供大家參考，具體如下： 1、建立一個vue例項

vue學習筆記之slot插槽基本用法例項分析

本文例項講述了vue學習筆記之slot插槽基本用法。分享給大家供大家參考，具體如下：

Vue父子傳遞例項講解

實現功能： 1、子元件的input輸入，改變父元件資訊 2、父元件對子元件1，3進行監聽與控制

vue常用指令程式碼例項總結

vue常用內建指令 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

vue.js 基本指令

前端主流框架：vue react angular 　　Vue 特點元件化開發、資料驅動（mvvm） 　　　　Vue虛擬dom是借鑑react的

vue具名插槽的基本使用例項

前言 具有名字的插槽slot使用 中的 \"name\" 屬性繫結元素 KucGcyk注意： 1，如果沒有匹配到 則放到匿名的插槽中

Vue監聽屬性圖文例項詳解

目錄什麼是監http://www.cppcns.com聽屬性http://www.cppcns.com？監聽屬www.cppcns.com性wiEGDUor和計算屬性的區別？監聽屬性的使用深度監聽立即呼叫寫在最後什麼是監聽屬性？

mongodb基本命令例項小結

本文例項講述了mongodb基本命令。分享給大家供大家參考，具體如下： 1 切換資料庫

Linux下mysql資料庫的建立匯入匯出 及一些基本指令

首先linux 下檢視mysql相關目錄 檢視 mysql 的安裝路徑 執行查詢 SQL mysql>show variables like \'%dir%\';

Redis Cluster的圖文講解

1.1 Redis-Cluster簡介 1.1.1 什麼是Redis-Cluster 為何要搭建Redis叢集。Redis是在記憶體中儲存資料的，而我們的電腦一般記憶體都不大，這也就意味著Redis不適合儲存大資料，適合儲存大資料的是Hadoop生態系統的Hba

MySQL資料表基本操作例項詳解

本文例項講述了MySQL資料表基本操作。分享給大家供大家參考，具體如下： 資料表的基本操作

Python傳送郵件的例項程式碼講解

一、郵件傳送示例 郵件傳送示例 flask_email及smtplib原生郵件傳送示例，適用於基於Flask框架開發，但是內部設定的定時任務傳送郵件/或提供離線介面傳送郵件操作

vue學習之Vue-Router用法例項分析

本文例項講述了vue學習之Vue-Router用法。分享給大家供大家參考，具體如下： Vue-router就像一個路由器，將元件(components)對映到路由(routes)後，通過點選<router-link>它可以在<router-view>中將相應

Laravel5.1 框架Middleware中介軟體基本用法例項分析

本文例項講述了Laravel5.1 框架Middleware中介軟體基本用法。分享給大家供大家參考，具體如下：

Laravel5.1 框架響應基本用法例項分析

本文例項講述了Laravel5.1 框架響應基本用法。分享給大家供大家參考，具體如下：