Vue計算屬性、事件監聽以及條件渲染實例分析

本文小編為大家詳細介紹“Vue計算屬性、事件監聽以及條件渲染實例分析”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue計算屬性、事件監聽以及條件渲染實例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

基礎語法

1、 插值（動態內容）

Mustache語法(雙大括號)

將data中的文本數據，插入到HTML中，此時數據是響應式的。

<span>Message: {{ msg }}</span>
<span>{{firstName}}{{lastName}}</span>
<span>{{firstName+lastName}}</span>
<span>{{firstName+""+lastName}}</span>
//使用 JavaScript 表達式
<h3> {{counter*2}}</h3>
<h3>{{ number + 1 }}</h3>
<h3>{{ ok ? 'YES' : 'NO' }}</h3>
<h3>{{ message.split('').reverse().join('') }}</h3>

指令

• v-once：執行一次性地插值，當數據改變時，插值處的內容不會更新

<span v-once>這個將不會改變: {{ msg }}</span>

• v-html :解析html并展示

• v-text：渲染指定dom的內容文本，類似Mustache，一般不用，不夠靈活，會覆蓋標簽內所有內容

• v-pre：原封不動展示標簽內容，不進行解析

<h3 v-pre>{{message}} </h3>

結果：{{message}}

• v-cloak：解決vue解析卡頓會出現{

  {}}閃爍的問題
  vue解析之前，p有屬性v-cloak，解析后沒有此屬性。
  所以 可以通過這個指令隱藏未編譯的 Mustache 標簽直到實例準備完畢

  <p id="app" v-cloak>{{message}}</p>

  <style>
      [v-cloak]{ display:none; }
  </style>

2、綁定屬性（動態屬性）

v-bind用于綁定一個或多個屬性值，或者向另一個組件傳遞props值。簡寫為冒號:

1、元素的src和href

<img :src="ImgUrl" /><a :href="aHref">百度</a>

2、class綁定

對象語法

我們可以傳給 v-bind:class 一個對象，以動態地切換 class

<p v-bind:class="{ active: isActive }"></p>

上面的語法表示 active 這個 class 存在與否將取決于數據 property isActive 的 truthiness。
你可以在對象中傳入更多字段來動態切換多個 class。此外，v-bind:class 指令也可以與普通的 class attribute 共存。

<p class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></p>

data: {
  isActive: true,
  hasError: false}

結果渲染為：

<p class="static active"></p>

當 isActive 或者 hasError 變化時，class 列表將相應地更新。例如，如果 hasError 的值為 true，class 列表將變為 "static active text-danger"。
綁定的數據對象不必內聯定義在模板里，也可以定義在data

<p v-bind:class="classObject"></p>data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

渲染的結果和上面一樣。我們也可以在這里綁定一個返回對象的計算屬性。

<p v-bind:class="classObject"></p>data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

返回對象的方法

<p v-bind:class="IsActive()"></p>data: {
  isActive: true,
  error: null
},
methods: {
  IsActive() {
    return {
      active: this.isActive && !this.error,
      line:isLine
    }
  }
}

數組語法

我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表：

<p v-bind:class="[activeClass, errorClass]"></p>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染為：

<p class="active text-danger"></p>

根據條件切換列表中的 class，可以用三元表達式：

<p v-bind:class="[isActive ? activeClass : '', errorClass]"></p>

這樣寫將始終添加 errorClass，但是只有在 isActive 是 truthy[1] 時才添加 activeClass。

不過，當有多個條件 class 時這樣寫有些繁瑣。所以在數組語法中也可以使用對象語法：

<p v-bind:class="[{ active: isActive }, errorClass]"></p>

3、 style綁定內聯樣式

對象語法
v-bind:style 的對象語法十分直觀——看著非常像 CSS，但其實是一個 JavaScript 對象。CSS property 名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：

<p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></p> <!--數加字符串隱式轉換為字符串類型 -->data: {
  activeColor: 'red',
  fontSize: 30
}

直接綁定到一個樣式對象通常更好，這會讓模板更清晰：

<p v-bind:style="styleObject"></p>data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

同樣的，對象語法常常結合返回對象的計算屬性使用。或者方法

<p v-bind:class="classObject"></p> //計算屬性<p v-bind:class="classObject()"></p> //方法

數組語法

v-bind:style 的數組語法可以將多個樣式對象應用到同一個元素上：

<p v-bind:style="[baseStyles, overridingStyles]"></p>

3、計算屬性

在模板中放入太多的邏輯會讓模板過重且難以維護，需要對數據進行變化處理后再顯示

<p id="example">   {{ message.split('').reverse().join('') }} </p>

基礎例子

<p id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p> <!--按照屬性的樣式給函數起名,引用函數名不用加括號--></p><script>var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 實例
      return this.message.split('').reverse().join('')
    }
  }})</script>

結果：

Original message: “Hello”

Computed reversed message: “olleH”

這里我們聲明了一個計算屬性 reversedMessage。我們提供的函數將用作 property vm.reversedMessage 的 getter 函數：

console.log(vm.reversedMessage) // => 'olleH'vm.message = 'Goodbye'console.log(vm.reversedMessage) // => 'eybdooG'

你可以打開瀏覽器的控制臺，自行修改例子中的 vm。vm.reversedMessage 的值始終取決于 vm.message 的值。
你可以像綁定普通 property 一樣在模板中綁定計算屬性。Vue 知道 vm.reversedMessage 依賴于 vm.message，因此當 vm.message 發生改變時，所有依賴 vm.reversedMessage 的綁定也會更新。而且最妙的是我們已經以聲明的方式創建了這種依賴關系：計算屬性的 getter 函數是沒有副作用 (side effect) 的，這使它更易于測試和理解。

計算屬性的 getter和setter

計算屬性默認只有 getter，是只讀屬性，不過在需要時你也可以提供一個 setter：

// ...computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }}// ...

現在再運行 vm.fullName = 'John Doe' 時，setter 會被調用，vm.firstName 和 vm.lastName 也會相應地被更新。

因為計算屬性一般沒有setter，所以簡寫為

 fullName:  function () {
      return this.firstName + ' ' + this.lastName }

計算屬性 vs 方法
通過在表達式中調用方法也能達到同樣的效果

<p>Reversed message: "{{ reversedMessage() }}"</p>// 在組件中<script>methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }}</script>

兩種方式的最終結果確實是完全相同的。然而，不同的是計算屬性是基于它們的響應式依賴進行緩存的。只在相關響應式依賴發生改變時它們才會重新求值。這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數。
這也同樣意味著下面的計算屬性將不再更新，相比之下，每當觸發重新渲染時，調用方法將總會再次執行函數。

計算屬性 vs 偵聽屬性

Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變動：偵聽屬性。

<p id="demo">{{ fullName }}</p><script>
    var vm = new Vue({
        el: '#demo',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            firstName: function (val) {
                this.fullName = val + ' ' + this.lastName            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val            }
        }</script>

上面代碼是命令式且重復的。將它與計算屬性的版本進行比較：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName    }
  }})

計算屬性傳參

計算屬性本身是不能傳參的，但是可以通過閉包傳參，但是傳參之后沒有緩存機制了，和methods沒有什么區別，所以官網并沒有介紹這個

 computed: {
	  usertype(){
		  return function (value){
			  var user = ''
			  value === 1 ? user = '學生' : user = '老師'
			  return user		  }
	  }
  }

4、事件監聽

基礎

可以用 v-on 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼。簡寫@click
許多事件處理邏輯會更為復雜，因此 v-on 還可以接收一個需要調用的方法名稱

<p id="example-1">
    <button v-on:click="counter += 1">Add 1</button>
    <button v-on:click="increment"> + </button>
    <button v-on:click="decrement"> - </button>
    <p>The button above has been clicked {{ counter }} times.</p></p><script>
    var example1 = new Vue({
        el: '#example-1',
        data: {
            counter: 0
        },
      methods:{
        increment(){
          this.counter++
        },
        decrement(){
           this.counter--;
        }
      }
    })</script>

參數問題(括號問題)

1、無參

<!--()可有可無-->
<button v-on:click="greet">Greet</button>
<button v-on:click="greet()">Greet</button>

2、有參

<!--方法有參數，調用時沒有傳參數，但是加了()，形參默認為undefind-->
<button v-on:click="greet()">Greet</button> 
<!--方法有參數，調用時沒有傳參數，也不加()，返回瀏覽器產生的Event對象MouseEvent-->
<button v-on:click="greet">Greet</button>

只需要event對象時，

<button @click="btnClick(event)">111</button>

需要event對象，同時也需要其他對象時，可以用特殊變量 $event 把它傳入方法：

<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
<script>
  methods: {
    warn: function (message, event) {
      // 現在我們可以訪問原生事件對象
      if (event) {
        event.preventDefault()
      }
      alert(message)
    }
  }
</script>

幾種錯誤寫法

<button @click="warn">111</button><!--傳的是event和undefined-->
<button @click="warn("111",event)">111</button><!--傳的是"111"和undefined(報錯，找不到event)-->

事件修飾符

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。

為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的。

<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>
  
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 禁止蒙版下的頁面滾動-->
<a v-on:touchmove.stop.prevent="doThat"></a> 

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即內部元素觸發的事件先在此處理，然后才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>

<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發 , 而不會等待 `onScroll` 完成, 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>

1.事件修飾符

• .stop 阻止事件冒泡，調用event.stopPropagation

<!-- 阻止單擊事件繼續傳播 --> 
<a v-on:click.stop="doThis"></a>

• .prevent 阻止事件默認行為，調用event.preventDefault()

<!-- 提交事件不再重載頁面 --><form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 禁止蒙版下的頁面滾動-->
<a v-on:touchmove.stop.prevent="doThat"></a> 
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

• .self 事件綁定的元素本身觸發時才觸發回調

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 --> 
<div v-on:click.self="doThat">...</div>

• .once 事件只能觸發一次，第二次就不會觸發了

不像其它只能對原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的組件事件上

• .native 將一個vue組件變成一個普通的html，使其可以監聽click等原生事件,監聽組件的原生事件

<Tag @click.native="handleClick">ok</Tag>

• .passive 能夠提升移動端的性能。

不要.passive 和 .prevent 一起使用，因為 .prevent 將會被忽略,同時瀏覽器可能會向你展示一個警告。請記 住，.passive 會告訴瀏覽器你不想阻止事件的默認行為。

<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發 -->
<!-- 而不會等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>

• .capture

<!-- 添加事件監聽器時使用事件捕獲模式 --> 
<!-- 即內部元素觸發的事件先在此處理，然后才交由內部元素進行處理 --> 
<div v-on:click.capture="doThis">...</div>

使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。

不要.passive 和 .prevent 一起使用，因為 .prevent 將會被忽略,同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認行為。

5、條件渲染

基礎

v-if 指令用于條件性地渲染一塊內容。這塊內容只會在指令的表達式返回 truthy 值的時候被渲染。

<h2 v-if="isShow">Vue is awesome!</h2>
<h2 v-else>isShow為false時顯示</h2>

在 <template> 元素上使用 v-if 條件渲染分組

因為 v-if 是一個指令，所以必須將它添加到一個元素上。但是如果想切換多個元素呢？此時可以把一個 <template> 元素當做不可見的包裹元素，并在上面使用 v-if。最終的渲染結果將不包含 <template> 元素。

<template v-if="ok">
  <h2>Title</h2>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p></template>

v-else-if不常用，用計算屬性更好

<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'"> B</div>
<div v-else-if="type === 'C'">  C</div>
<div v-else>  Not A/B/C</div>

類似于 v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之后。

用 key 管理可復用的元素

Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。這么做除了使 Vue 變得非常快之外，還有其它一些好處。例如，如果你允許用戶在不同的登錄方式之間切換：

<template v-if="loginType === 'username'">
  <label for="username">Username</label><!--點擊label,指向的input獲得焦點-->
  <input id="username" placeholder="Enter your username"></template><template v-else>
  <label for="email">Email</label>
  <input id="email" placeholder="Enter your email address"></template>

問題：那么在上面的代碼中切換 loginType 將不會清除用戶已經輸入的內容。

原因：兩個模板使用了相同的元素，虛擬DOM渲染時，出于性能考慮<input> 不會被替換掉僅僅是替換了它的 placeholder，

解決：添加一個具有唯一值的 key attribute 即可，key不同，不會復用

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input"></template><template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input"></template>

注意，<label> 元素仍然會被高效地復用，因為它們沒有添加 key attribute。

v-show

另一個用于根據條件展示元素的選項是 v-show 指令。用法大致一樣：

<h2 v-show="ok">Hello!</h2>

不同的是帶有 v-show 的元素始終會被渲染并保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性display。

注意，v-show 不支持 <template> 元素，也不支持 v-else。

v-if vs v-show

v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。

v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。

相比之下，v-show 就簡單得多——不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換,當條件為false時，僅僅是將元素的display屬性設置為none而已。

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。

因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

不推薦同時使用 v-if 和 v-for。當 v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優先級。

6、列表渲染

6.1 遍歷數組

用 v-for 把一個數組對應為一組元素，v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數據數組，而 item 則是被迭代的數組元素的別名。

<ul id="example-1">
  <li v-for="item in items" :key="item.message">{{ item.message }}  </li></ul><script>var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }})</script>

結果：

• Foo

• Bar

在 v-for 塊中，我們可以訪問所有父作用域的 property。v-for 還支持一個可選的第二個參數，即當前項的索引index。

<ul id="example-2">
  <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li></ul><script>var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }})</script>

結果：

• Parent - 0 - Foo

• Parent - 1 - Bar

你也可以用 of 替代 in 作為分隔符，因為它更接近 JavaScript 迭代器的語法：

<p v-for="item of items"></p>

6.2 遍歷對象

你也可以用 v-for 來遍歷一個對象的 property。

<!--第一個參數為value--><ul id="v-for-object" class="demo">
  <li v-for="value in object"> {{ value }} </li></ul><!--第二個參數為鍵名key--><p v-for="(value, name) in object">
  {{ name }}: {{ value }}</p><!--第三個參數為索引index--><p v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}</p><script>new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }})</script>

結果：

• How to do lists in Vue

• Jane Doe

• 2016-04-10

title: How to do lists in Vue

author: Jane Doe

publishedAt: 2016-04-10

\0. title: How to do lists in Vue

\1. author: Jane Doe

\2. publishedAt: 2016-04-10

在遍歷對象時，會按 Object.keys() 的結果遍歷，但是不能保證它的結果在不同的 JavaScript 引擎下都一致。

6.3 維護狀態 (key屬性)

當 Vue 正在更新使用 v-for 渲染的元素列表時，它默認使用“就地更新”的策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是就地更新每個元素，并且確保它們在每個索引位置正確渲染（與虛擬DOM和Diff算法有關）。

這個默認的模式是高效的，但是只適用于不依賴子組件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。

為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key attribute：

<p v-for="item in items" v-bind:key="item.id">
  <!-- 內容 --></p>

建議盡可能在使用 v-for 時提供 key attribute，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。因為它是 Vue 識別節點的一個通用機制，key 并不僅與 v-for 特別關聯。

不要使用對象或數組之類的非基本類型值作為 v-for 的 key，請用字符串或數值類型的值。

6.4 數組更新檢測

變更方法（數組的哪些方法是響應式的）

變更方法會變更調用了這些方法的原始數組

Vue 將被偵聽的數組的變更方法進行了包裹，所以它們也將會觸發視圖更新。這些被包裹過的方法包括：

• push() 加元素，this.names.push("aaa","bbb")

• pop() 刪除數組最后一個元素 ，names.pop()

• shift()刪除數組第一個元素

• unshift()數組最前面添加元素

• splice()刪除/插入/替換元素

  第一個參數為從哪個位置開始刪除/插入/替換元素

  刪除元素：第二個參數傳入要刪除幾個元素，不傳則刪除后面所有元素splice(0,2)

  替換元素：第二個元素傳入要替換幾個元素，后面跟用于替換的元素splice(0,2,’d’,'2')

  插入元素：第二個元素傳入0，后面跟要插入的元素splice(0,0,’d’)

• sort()數組排序

• reverse()翻轉數組

替換數組（高階函數filter、map、reduce）

非變更方法，例如 filter()、concat() 和 slice()。它們不會變更原始數組，而總是返回一個新數組。你可能認為這將導致 Vue 丟棄現有 DOM 并重新渲染整個列表。幸運的是，事實并非如此。Vue 為了使得 DOM 元素得到最大范圍的重用而實現了一些智能的啟發式方法，所以用一個含有相同元素的數組去替換原來的數組是非常高效的操作。

由于 JavaScript 的限制，Vue 不能檢測數組和對象的變化。深入響應式原理中有相關的討論。

filter()顯示過濾/排序后的結果

回調函數必須返回一個boolean值：

返回true時，函數內部會自動將這次回調的n加入到新的數組；返回false時，函數內部將過濾掉這次的n。

有時，我們想要顯示一個數組經過過濾或排序后的版本，而不實際變更或重置原始數據。在這種情況下，可以創建一個計算屬性，來返回過濾或排序后的數組。例如：

<li v-for="n in evenNumbers">{{ n }}</li>
<script>
data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}
</script>

在計算屬性不適用的情況下 (例如，在嵌套 v-for 循環中) 你可以使用一個方法：

<ul v-for="set in sets">
  <li v-for="n in even(set)">{{ n }}</li>
</ul>
<script>
data: {
  sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}
</script>

map() 映射

let nums=[ 1, 2, 3, 4, 5 ]let nuwnums=nums.map(function(n){
    return n*2})

reduce 數組內元素的匯總

let nums=[ 1, 2, 3, 4, 5 ]//preValue為前一個值，0為初始默認值;n為數組內元素let nuwnums=nums.reduce(function(preValue,n){
    return preValue+n},0)

[在 v-for 里使用值范圍]

v-for 也可以接受整數。在這種情況下，它會把模板重復對應次數。

<p>
  <span v-for="n in 10">{{ n }} </span>
</p>

結果：

1 2 3 4 5 6 7 8 9 10

在 <template>上使用 v-for

類似于 v-if，你也可以利用帶有 v-for 的 <template> 來循環渲染一段包含多個元素的內容。比如：

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="pider" role="presentation"></li>
  </template>
</ul>

v-for 與 v-if 一同使用

注意我們不推薦在同一元素上使用 v-if 和 v-for。

當它們處于同一節點，v-for 的優先級比 v-if 更高，這意味著 v-if 將分別重復運行于每個 v-for 循環中。

7、表單輸入綁定v-model

基礎使用

實現表單元素和數據的雙向綁定

<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>data:{
	message:''
}

原理

<input type="text" :value="message" @input="valueChange" /><p>Message is: {{ message }}</p><script>
  data:{
    message:''
  },
	methods:{
     valueChange(event){
       this.message=$event.target.value;
     }
  }      </script>

簡寫：

<input type="text" :value="message" @input="message=$event.target.value" >

v-model 在內部為不同的輸入元素使用不同的 property 并拋出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；

• checkbox 和 radio 使用 checked property 和 change 事件；

• select 字段將 value 作為 prop 并將 change 作為事件。

radio單選框

<label for="male">
	<input type="radio" id="male" value="男" v-model="sex">男</label><label for="female">
	<input type="radio" id="female" value="女" v-model="sex">女</label><h3>您選擇的性別是{{sex}}</h3>data:{sex:'女'}

data中的sex為默認值，其單選按鈕因為雙向綁定也會默認選中

單選按鈕的互斥：v-model 或者 name=“sex” 放在一個組內

checkbox復選框

單個勾選框，綁定到Boolean值

<label for="agree">
	<input type="checkbox" id="agree" v-model="isAgree">同意協議</label><h3>是否同意協議{{isAgree}}</h3><button :disabeled="!isAgree">
  下一步</button>data:{isAgree:false}

多選框，綁定到數組

<input type="checkbox"  v-model="hobbies">籃球<input type="checkbox"  v-model="hobbies">足球
data:{hobbies:[]}

select選擇框

單選

<select v-model="fruit">
  <option value="apple">蘋果</option>
  <option value="bannner">香蕉</option></select><h3>選擇的水果是{{fruit}}</h3>data:{fruit:''}

多選

<select v-model="fruits" multiple>
  <option value="apple">蘋果</option>
  <option value="bannner">香蕉</option></select><h3>選擇的水果是{{fruits}}</h3>data:{fruits:[]}

修飾符

.lazy 在輸入框輸入完內容，光標離開時才更新視圖
.trim 過濾首尾空格
.number 自動將用戶的輸入值轉為數值類型。如果先輸入數字，那它就會限制你輸入的只能是數字;如果先輸入字符串，那就相當于沒有加.number

用法如下：

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

還有很多修飾符比如鍵盤，鼠標等修飾符

讀到這里，這篇“Vue計算屬性、事件監聽以及條件渲染實例分析”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。