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

简介
说明

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

官网

条件渲染 — Vue.js

v-if和v-show的区别
Vue--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
Vue--v-if和v-show的区别
点击“修改显示的状态”。

结果:显示出“hello world”节点
Vue--v-if和v-show的区别

上一篇:linux生于网络,将网络作为计算机


下一篇:Ubuntu-嵌入式linux开发环境搭建-基本工具安装