Vue計算屬性、事件監(jiān)聽以及條件渲染實例分析

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

成都一家集口碑和實力的網(wǎng)站建設(shè)服務(wù)商，擁有專業(yè)的企業(yè)建站團隊和靠譜的建站技術(shù)，十余年企業(yè)及個人網(wǎng)站建設(shè)經(jīng)驗 ,為成都千余家客戶提供網(wǎng)頁設(shè)計制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設(shè)等服務(wù),包括成都營銷型網(wǎng)站建設(shè)，品牌網(wǎng)站建設(shè)，同時也為不同行業(yè)的客戶提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計的服務(wù),包括成都電商型網(wǎng)站制作建設(shè),裝修行業(yè)網(wǎng)站制作建設(shè)，傳統(tǒng)機械行業(yè)網(wǎng)站建設(shè),傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設(shè)。在成都做網(wǎng)站,選網(wǎng)站制作建設(shè)服務(wù)商就選創(chuàng)新互聯(lián)。

Vue計算屬性、事件監(jiān)聽以及條件渲染實例分析

基礎(chǔ)語法

1、 插值（動態(tài)內(nèi)容）

Mustache語法(雙大括號)

將data中的文本數(shù)據(jù)，插入到HTML中，此時數(shù)據(jù)是響應(yīng)式的。

<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：執(zhí)行一次性地插值，當數(shù)據(jù)改變時，插值處的內(nèi)容不會更新

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

  • v-html :解析html并展示

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

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

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

結(jié)果：{{message}}

  • v-cloak：解決vue解析卡頓會出現(xiàn){

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

  <p id="app" v-cloak>{{message}}</p>
  <style>
      [v-cloak]{ display:none; }
  </style>

2、綁定屬性（動態(tài)屬性）

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

1、元素的src和href
<img :src="ImgUrl" /><a :href="aHref">百度</a>
2、class綁定

對象語法

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

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

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

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

結(jié)果渲染為：

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

當 isActive 或者 hasError 變化時，class 列表將相應(yīng)地更新。例如，如果 hasError 的值為 true，class 列表將變?yōu)?"static active text-danger"。
綁定的數(shù)據(jù)對象不必內(nèi)聯(lián)定義在模板里，也可以定義在data

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

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

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

數(shù)組語法

我們可以把一個數(shù)組傳給 v-bind:class，以應(yīng)用一個 class 列表：

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

渲染為：

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

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

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

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

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

<p v-bind:class="[{ active: isActive }, errorClass]"></p>
3、 style綁定內(nèi)聯(lián)樣式

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

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

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

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

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

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

數(shù)組語法

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

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

3、計算屬性

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

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

結(jié)果：

Original message: “Hello”

Computed reversed message: “olleH”

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

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 發(fā)生改變時，所有依賴 vm.reversedMessage 的綁定也會更新。而且最妙的是我們已經(jīng)以聲明的方式創(chuàng)建了這種依賴關(guān)系：計算屬性的 getter 函數(shù)是沒有副作用 (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]
    }
  }}// ...

現(xiàn)在再運行 vm.fullName = 'John Doe' 時，setter 會被調(diào)用，vm.firstName 和 vm.lastName 也會相應(yīng)地被更新。

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

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

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

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

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

計算屬性 vs 偵聽屬性

Vue 提供了一種更通用的方式來觀察和響應(yīng) Vue 實例上的數(shù)據(jù)變動：偵聽屬性。

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

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

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

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

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

4、事件監(jiān)聽

基礎(chǔ)

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

<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>
參數(shù)問題(括號問題)

1、無參

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

2、有參

<!--方法有參數(shù)，調(diào)用時沒有傳參數(shù)，但是加了()，形參默認為undefind-->
<button v-on:click="greet()">Greet</button> 
<!--方法有參數(shù)，調(diào)用時沒有傳參數(shù)，也不加()，返回瀏覽器產(chǎn)生的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) {
      // 現(xiàn)在我們可以訪問原生事件對象
      if (event) {
        event.preventDefault()
      }
      alert(message)
    }
  }
</script>

幾種錯誤寫法

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

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

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

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

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

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

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

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

1.事件修飾符

  • .stop 阻止事件冒泡，調(diào)用event.stopPropagation

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

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

<!-- 提交事件不再重載頁面 --><form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 禁止蒙版下的頁面滾動-->
<a v-on:touchmove.stop.prevent="doThat"></a> 
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

  • .self 事件綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)

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

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

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

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

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

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

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

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

  • .capture

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

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

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

5、條件渲染

基礎(chǔ)

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

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

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

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

Vue 會盡可能高效地渲染元素，通常會復(fù)用已有元素而不是從頭開始渲染。這么做除了使 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 將不會清除用戶已經(jīng)輸入的內(nèi)容。

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

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

<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> 元素仍然會被高效地復(fù)用，因為它們沒有添加 key attribute。

v-show

另一個用于根據(jù)條件展示元素的選項是 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 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當?shù)乇讳N毀和重建。

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

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

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

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

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

6、列表渲染

6.1 遍歷數(shù)組

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

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

結(jié)果：

  • Foo

  • Bar

在 v-for 塊中，我們可以訪問所有父作用域的 property。v-for 還支持一個可選的第二個參數(shù)，即當前項的索引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>

結(jié)果：

  • Parent - 0 - Foo

  • Parent - 1 - Bar

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

<p v-for="item of items"></p>
6.2 遍歷對象

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

<!--第一個參數(shù)為value--><ul id="v-for-object" class="demo">
  <li v-for="value in object"> {{ value }} </li></ul><!--第二個參數(shù)為鍵名key--><p v-for="(value, name) in object">
  {{ name }}: {{ value }}</p><!--第三個參數(shù)為索引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>

結(jié)果：

  • 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() 的結(jié)果遍歷，但是不能保證它的結(jié)果在不同的 JavaScript 引擎下都一致。

6.3 維護狀態(tài) (key屬性)

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

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

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

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

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

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

6.4 數(shù)組更新檢測
變更方法（數(shù)組的哪些方法是響應(yīng)式的）

變更方法會變更調(diào)用了這些方法的原始數(shù)組

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

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

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

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

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

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

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

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

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

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

  • sort()數(shù)組排序

  • reverse()翻轉(zhuǎn)數(shù)組

替換數(shù)組（高階函數(shù)filter、map、reduce）

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

由于 JavaScript 的限制，Vue 不能檢測數(shù)組和對象的變化。深入響應(yīng)式原理中有相關(guān)的討論。

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

回調(diào)函數(shù)必須返回一個boolean值：

返回true時，函數(shù)內(nèi)部會自動將這次回調(diào)的n加入到新的數(shù)組；返回false時，函數(shù)內(nèi)部將過濾掉這次的n。

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

<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 循環(huán)中) 你可以使用一個方法：

<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 數(shù)組內(nèi)元素的匯總

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

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

v-for 也可以接受整數(shù)。在這種情況下，它會把模板重復(fù)對應(yīng)次數(shù)。

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

結(jié)果：

1 2 3 4 5 6 7 8 9 10

在 <template>上使用 v-for

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

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

當它們處于同一節(jié)點，v-for 的優(yōu)先級比 v-if 更高，這意味著 v-if 將分別重復(fù)運行于每個 v-for 循環(huán)中。

7、表單輸入綁定v-model

基礎(chǔ)使用

實現(xiàn)表單元素和數(shù)據(jù)的雙向綁定

<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 在內(nèi)部為不同的輸入元素使用不同的 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” 放在一個組內(nèi)

checkbox復(fù)選框

單個勾選框，綁定到Boolean值

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

多選框，綁定到數(shù)組

<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 在輸入框輸入完內(nèi)容，光標離開時才更新視圖
.trim 過濾首尾空格
.number 自動將用戶的輸入值轉(zhuǎn)為數(shù)值類型。如果先輸入數(shù)字，那它就會限制你輸入的只能是數(shù)字;如果先輸入字符串，那就相當于沒有加.number

用法如下：

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

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

讀到這里，這篇“Vue計算屬性、事件監(jiān)聽以及條件渲染實例分析”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當前文章：Vue計算屬性、事件監(jiān)聽以及條件渲染實例分析
標題路徑：http://bm7419.com/article16/jdcegg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、響應(yīng)式網(wǎng)站、網(wǎng)站內(nèi)鏈、域名注冊、自適應(yīng)網(wǎng)站、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)