Vue常用指令v-show

v-show也是条件渲染指令，不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。和v-if指令不同点在于：v-show是根据表达式之真假值，切换元素的 display CSS 属性，当条件变化时该指令触发过渡效果。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title> v-show </title><script src="js/vue.js"></script>
</head>
<body>
<div id="app"><!-- 用法:根据表达式的值的真假条件渲染元素. 在切换时元素及它的数据绑定/组件被销毁并重建. --><p v-show="show">要显示出来</p><p v-show="hide">不要显示出来</p><!-- 大于170的显示,否则不现实 --><p v-show="height>170">Apollo的身高:{{ height }}CM</p><p v-show="height>150">Jack的身高:{{ height }}CM</p>
</div><script>// 创建Vue的实例
    let app = new Vue({el: '#app',data: {show: true,hide: false,height: 168}})
</script>
</body>
</html>

v-show和v-if的区别：
v-if 是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件； v-show 则只是简单地基于 CSS 切换。
v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变则使用 v-if 较好。

转载于:https://www.cnblogs.com/apollo1616/articles/10034160.html

Vue常用指令v-show相关推荐

Vue常用指令 [vue框架][web前端]
Vue常用指令 Vue常用指令: 指令: HTML标签上带有v-前缀的特殊属性, 不同的指令有不同的意义 v-bind 为HTML标签绑定属性值, 如设置href,css样式等 eg: <bod ...
Vue 常用指令汇总
文章目录 1,vue简介 2,选择器:根据id.class等查找 3,静态绑定数据 data 4,插值 {{}}单项绑定 5,数据动态绑定:computed 6,数据双向绑定 :v-model 7,类 ...
VUE常用指令v-xxx
概述在vue中提供一些对于页面+数据的更为方便的操作,这些操作就叫做指令. 譬如在HTML页面中这样使用`<div v-xxx=''></div>` 在vue中v-xxx就是 ...
Vue.js 第1章 Vue常用指令学习
今日目标能够写出第一个vue应用程序能够接受为什么需要学vue 能够使用指令能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要可以提高开发效率实现vu ...
【vue 基础】 vue常用指令实例总结
文章目录 1.v-bind 2. v-on 2.1 参数问题 2.2 修饰符问题 3. v-for 4. v-if 5.v-show 6. v-model(重点) 6.1 原理 6.2 v-model ...
Vue 常用指令自定义指令
v-bind, v-model v-bind 为单向绑定: 数据只能从data流向页面 v-model 双向绑定: 数据不仅从data流向页面,还可以重页面流向data, 一般应用在表单类元素上,(如 ...
vue教程3：vue常用指令
v-text 作用:渲染文本到标签上,跟JQuery的text()方法类似直接上例子: <script>var app = new Vue({el: "#app",d ...
vue input file onchange_vue常用指令汇总
在我们对比vue与react的时候,会发现一个很明显的特点,react的写法很自由,用js来搞定一切,而vue的模版语法提供了一套相对固定的模式来书写页面,vue的优势在于这些特性帮助我们简化了代码, ...
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...

Vue常用指令v-show

Vue常用指令v-show相关推荐

最新文章

热门文章