Vue基礎語法之計算屬性、事件監聽以及條件渲染（整理分享）

Vue筆記二：基礎語法

1、 插值（動態內容）

Mustache語法(雙大括號)

將data中的文字資料，插入到HTML中，此時資料是響應式的。

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

指令

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

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

• v-html :解析html並展示
• v-text：渲染指定dom的內容文字，類似Mustache，一般不用，不夠靈活，會覆蓋標籤內所有內容
• v-pre：原封不動展示標籤內容，不進行解析

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

結果：{{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 值的時候被渲染。

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

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

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

<template v-if="ok">
  <h1>Title</h1>
  <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 指令。用法大致一樣：

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

不同的是帶有 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><h2>您選擇的性別是{{sex}}</h2>data:{sex:'女'}

data中的sex為預設值，其無線電鈕因為雙向繫結也會預設選中

無線電鈕的互斥：v-model 或者 name=「sex」 放在一個組內

checkbox核取方塊

單個勾選框，繫結到Boolean值

<label for="agree">
	<input type="checkbox" id="agree" v-model="isAgree">同意協定</label><h2>是否同意協定{{isAgree}}</h2><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><h2>選擇的水果是{{fruit}}</h2>data:{fruit:''}

多選

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

修飾符

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

用法如下：

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

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

相關推薦：

以上就是Vue基礎語法之計算屬性、事件監聽以及條件渲染（整理分享）的詳細內容，更多請關注TW511.COM其它相關文章！