今天完成了什么：

处理角色列表新增功能bug；

看面试题；

遇到了什么问题：

后端的锅导致以为自己的问题花了很长时间检测自己的代码，又污染了svn；

收获了什么：

签到模块用到了v-if，并对他进行了了解；

条件渲染 v-if、v-show，并比较两者差异。

v-if

若希望某区块在特定条件下才出现，可以使用v-if、v-if-else和v-else依照运算结果决定出现的时机。

例 1

条件为 true 或 false 时才显示。如下范例，依照 isShow 的值决定显示的区块，如果 isShow 为 true，显示「条正成立」；反之，显示「条件不成立」。

<div id="app">

  <div v-if="isShow">条正成立</div>

  <div v-else>条件不成立</div>

</div>

var vm = new Vue({

  el: '#app',

  delimiters: ['${', '}'],

  data: {

    isShow: true

  }

});

// 由于部落格会把双花括号的内容吃掉，所以设定 delimiters 以显示完整程式码。

例 2

将条件判断写在画面上，依照运算结果决定显示与否。如下程式码所示，依照 type 决定要显示的区块。由于目前设定 type 为 B，因此画面上会显示 B。

<div id="app">

  <div v-if="type === A">A</div>

  <div v-else-if="type === B">B</div>

  <div v-else>C</div>

</div>

var vm = new Vue({

  el: '#app',

  delimiters: ['${', '}'],

  data: {

    type: "B"

  }

});

打开浏览器会看到画面显示 B。

Vue.js: 条件渲染 v-if

使用 key 决定可重覆使用的元素

为了效能因素，若区块元素切换只是因为为条件不同而带入不同的值，元素不会重新渲染，只是替换掉不同的地方。

如下所示，根据 isShow 的真伪值决定显示的区块，但不论如何切换，使用者填入的 value 始终不会被清除，而只是替换掉不同的地方，即 placeholder 而已。

Vue.js: 条件渲染 v-if

<div id="app">

  <div v-if="isShow">

    <input type="text" placeholder="条件成立时的提示文字">

  </div>

  <div v-else>

    <input type="text" placeholder="条件不成立时的提示文字">

  </div>

  <button @click="toggle">切换显示条件</button>

</div>

var vm = new Vue({

  el: '#app',

  delimiters: ['${', '}'],

  data: {

    isShow: true

  },

  methods: {

    toggle: function() {

      this.isShow = !this.isShow;

    }

  }

});

若希望能有效区别，可加上 key 并带入唯一值，这样每次切换就会重新渲染，而非重覆使用已有元素。

于是，每次切换时，使用者输入就会被清空了。

Vue.js: 条件渲染 v-if

<div id="app">

  <div v-if="isShow">

    <input type="text" key="123456789" placeholder="条件成立时的提示文字">

  </div>

  <div v-else>

    <input type="text" key="987654321" placeholder="条件不成立时的提示文字">

  </div>

  <button @click="toggle">切换显示条件</button>

</div>

v-show

用法与v-if大致相同。

<div id="app">

  <div v-show="isShow">条正成立</div>

</div>

v-if 与 v-show 的差异

使用上来说，差异在于是否有 else 的状况。若有其他状况，则使用v-if；否则v-if和v-show效果相同。

以 HTML 渲染上来说，v-if是有条件的渲染的，若条件判断为 true 则渲染；而v-show则是无条件渲染，但视条件以 inline style css 隐藏。

<template>可用v-if决定是否出现，但无法使用v-show。

明天计划：

修复部分bug；

看面试题；