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

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

基礎語法

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

Mustache語法(雙大括號)

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

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

結果：{{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}

結果渲染為：

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

當 isActive 或者 hasError 變化時，class 列表將相應地更新。例如，如果 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
  }
}

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

<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，以應用一個 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'
  }
}

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

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

數(shù)組語法

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

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

3、計算屬性

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

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

基礎例子

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

結果：

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)建了這種依賴關系：計算屬性的 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 也會相應地被更新。

因為計算屬性一般沒有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>

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

計算屬性 vs 偵聽屬性

Vue 提供了一種更通用的方式來觀察和響應 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>

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

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 = '學生' : user = '老師'
			  return user		  }
	  }
  }

4、事件監(jiān)聽

基礎

可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時運行一些 JavaScript 代碼。簡寫@click
許多事件處理邏輯會更為復雜，因此 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>

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

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

5、條件渲染

基礎

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。最終的渲染結果將不包含 <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 將不會清除用戶已經(jīng)輸入的內(nèi)容。

原因：兩個模板使用了相同的元素，虛擬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

另一個用于根據(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屬性設置為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ù)組對應為一組元素，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>

結果：

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

結果：

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

結果：

• 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 維護狀態(tài) (key屬性)

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

這個默認的模式是高效的，但是只適用于不依賴子組件狀態(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 特別關聯(lián)。

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

6.4 數(shù)組更新檢測

變更方法（數(shù)組的哪些方法是響應式的）

變更方法會變更調(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ù)組。你可能認為這將導致 Vue 丟棄現(xiàn)有 DOM 并重新渲染整個列表。幸運的是，事實并非如此。Vue 為了使得 DOM 元素得到最大范圍的重用而實現(xiàn)了一些智能的啟發(fā)式方法，所以用一個含有相同元素的數(shù)組去替換原來的數(shù)組是非常高效的操作。

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

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

回調(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ù)。在這種情況下，它會把模板重復對應次數(shù)。

<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> 來循環(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 將分別重復運行于每個 v-for 循環(huán)中。

7、表單輸入綁定v-model

基礎使用

實現(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復選框

單個勾選框，綁定到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)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內(nèi)容的文章，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

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

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

廣告

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