简介
说明
本文用示例介绍Vue中v-if和v-show的区别。
官网
条件渲染 — Vue.js
v-if和v-show的区别
示例
v-if
代码
Demo.vue
hello world
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”节点