vue v-show指令

v-show和v-if的显示情况类似，但是原理不一样，v-show是通过控制元素的display属性，对元素的显示和隐藏进行逻辑判断，并没有实现元素的下树

<body><div id="app"><p v-show='boo >= 5'>我是5</p><button @click="add">按我加1</button></div><script src="js/vue.js"></script><script>var vue = new Vue({el: '#app',data:{boo: 0},methods:{add(){this.boo++}}})</script>
</body>

v-show和v-if的使用场景区分是如果页面切换的特别频繁使用v-show，如果页面的涉及范围特别大并且不是特别频繁的切换使用v-if，因为主要区分是涉及到页面的加载性能.

vue v-show指令相关推荐

Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
vue实例、指令、生命周期
vue实例.指令.生命周期本章重点 1.生命周期 2.插值 3.指令一.创建一个实例vue实例每一个vue应用都是通过vue函数创建一个新的vue实例开始的语法: ver vm = new V ...
Vue -- 基础语法指令(v-bind，v-if，v-else，v-else-if，v-for）
文章目录 1. Vue--基础语法指令(v-bind,v-if,v-else,v-else-if,v-for) 1.1 v-bind 1.1.1 代码示例 1.1.2 运行结果 1.1.3 小结 1. ...
01 vue 基础（指令）
vue官网 https://cn.vuejs.org/ 一.什么是 MVVM M - model 数据 (提供) V - view 界面 / 模板(提供) VM - viewModel 连接模板和数据 ...
【Vue基本指令】一.什么是Vue；二.Vue开发的方式；三.Vue的基本指令（重点）
目录一.什么是Vue 1.前端技术的发展(html.CSS.JavaScript) (1)JQuery:是对JavaScript进行了封装,使得操作DOM.事件处理.动画处理.Ajax交互变得非常简 ...
03、Vue.js---自定义指令
2019独角兽企业重金招聘Python工程师标准>>> 自定义指令的简介(官网):除了核心功能默认内置的指令,Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象 ...
Vue.directive自定义指令
Vue除了内部指令,我们也可以定义一些属于自己的指令,比如我们要定义一个v-diy的指令,作用就是让文字变成红色. 写好了这个功能,我们现在就自己定义一个全局的指令.我们这里使用Vue.directi ...
vue中v-model指令的使用之Vue知识点归纳(九)
本文中描述 vue 中 v-model 指令的基本使用 1 简述 vue 中 v-model 用来获取和设置表单中的值 2 案例 <!DOCTYPE html> <html lan ...
vue中v-bind指令的使用之Vue知识点归纳(七)
本文中描述 vue 中 v-bind 指令的基本使用 1 简述 vue 中 v-bind 用来操作 html 元素标签中的属性 2 案例 <!DOCTYPE html> <html ...
vue中v-if指令的使用之Vue知识点归纳(六)
本文章描述 vue 中 v-if 的基本使用 vue 中 v-show 与 v-if 的区别 1 简述 vue 中 v-if 指令,顾名思义是用来进行条件判断的,直接操作 dom 2 案例 <! ...

vue v-show指令

vue v-show指令相关推荐

最新文章

热门文章