Vue--v-if和v-show的区别

简介
说明

    本文用示例介绍Vue中v-if和v-show的区别。

官网

条件渲染 — Vue.js

v-if和v-show的区别

示例
v-if
代码

Demo.vue

return {
  msg: 'Welcome to Your Vue.js App',
  requireShow: false
}

},
methods: {

updateShowState() {
  this.requireShow = !this.requireShow;
}

}
}

路由（router/index.js）

import Vue from 'vue'
import Router from 'vue-router'
import Demo from "../views/Demo";

Vue.use(Router)

export default new Router({
routes: [

{
  path: '/demo',
  name: 'Demo',
  component: Demo,
}

],
})

测试

访问：http://localhost:8080/#/demo

点击“修改显示的状态”。

结果：显示出“hello world”节点