Vue渲染函數

時間 2019-11-26

標籤 vue 渲染函數简体版

原文原文鏈接

使用方法

v-if ：this

<h1 v-if="xkd">俠課島</h1>

template 中配合 v-if 條件渲染一整組：code

<template v-if="a">
	<h1>Title</h1>
	<p>Paragraph one</p>
	<p>Paragraph two</p>
</template>

使用v-else 指令來表示 v-if 的 else，v-else 元素必須緊跟在 v-if 或者 v-else-if元素的後面，不然它將不會被識別：blog

<h1 v-if="a">True</h1>
<h1 v-else>FALSE</h1>

屢次使用 v-if ：ip

<h1 v-if="color == 'red'" style="color: red;">紅</h1>
<h1 v-else-if="color == 'green'" style="color: green;">綠</h1>
<h1 v-else="color == 'blue'" style="color: blue;">藍 </h1>

如圖所示：input

key 管理可複用的元素

一般會複用已有元素而不是從頭開始渲染（就近原則），key使得Vue渲染速度會變得很是快。it

下面是key的使用方法：io

<body>
  <div id="main">
    <template v-if="loginType === 'username'">
      <label>用戶名</label>
      <input placeholder="請輸入用戶名" key="username-input" />
    </template>
    <template v-else>
      <label>郵箱</label>
      <input placeholder="請輸入郵箱" key="email-input" />
    </template>
    <input type="button" value="切換" v-on:click="changeType" />

  </div>
</body>

<script>
  var vm = new Vue({
    el: '#main',
    data: {
      'loginType': 'username'
    },
    methods: {
      changeType: function() {
        if (this.loginType == 'username') {
          this.loginType = 'email';
        } else {
          this.loginType = 'username';
        }
      }
    }
  })
</script>