使用 v-if 在 Vue 中进行条件渲染

Question

v-if 指令 允许您有条件地渲染一个块。 它不同于 v-show 在那里面 v-if 如果其表达式的计算结果为 false。

const app = new Vue({
  data: () => ({ render: false }),
  template: `
    <div>
      <h1 v-if="render">Hello, World</h1>
    </div>
  `
});

// Vue will **not** render 'Hello, World' because the `v-if`
// expression evaluates to false.
const data = await renderToString(app);
// <div data-server-rendered="true"><!----></div>
data;

v-else-if 和 v-else

Vue 也有 v-else-if 和 v-else 指令 行为类似的 else if和 else 在 JavaScript 中。

const app = new Vue({
  data: () => ({ value: 1 }),
  template: `
    <div>
      <div v-if="value > 0">Positive</div>
      <div v-else-if="value < 0">Negative</div>
      <div v-else>Zero</div>
    </div>
  `
});

let data = await renderToString(app);
// <div data-server-rendered="true"><div>Positive</div></div>
data;

app._data.value = -1;
data = await renderToString(app);
// <div data-server-rendered="true"><div>Negative</div></div>
data;

app._data.value = 0;
data = await renderToString(app);
// <div data-server-rendered="true"><div>Zero</div></div>
data;

生命周期挂钩

Vue 组件有生命周期钩子 ，比如 created 创建组件时调用的钩子，以及 mounted 当组件被安装时。

当 Vue 渲染一个组件时，因为 v-if 表达变成了 true，它触发了 created 和 mounted 的钩子。 例如， 下面的代码将打印两个 created 和 mounted，每次 display 更改为 true 从 false。

Vue.component('test', {
  created: function() {
    console.log('Created!');
  },
  mounted: function() {
    console.log('Mounted!');
  },
  template: '<h1>Hello World</h1>'
});

const app = new Vue({
  data: () => ({ display: false }),
  template: `
    <div>
      <test v-if="display"></test>
      <div>
        <button v-on:click="display = !display">Toggle</button>
      </div>
    </div>
  `
});