v-show组件 vue_Vue.js实例之v-show用法

摘要：

上篇文章介绍了Vue.js中的v-if失效的原因及三种解决方法，今天我们接着讲下v-show的用法以及解决问题的第四种方法......

一、回顾

在前日凌晨的文章中，艺灵分享了关于v-if切换时失效的原因的3种解决的方法，今天我们继续文章中提到的v-show来做一个小案例。对于上篇文章，需要回顾的看官可以点我看详情，此处顺便附上3种方法的demo案例，点我看demo

二、v-show用法

v-show的用法与前面的v-if类似，用上次的代码，直接将if修改成show即可。

下面我们开始做一个实例了，这个实例的效果看官应该都见过，就是：点击一个按钮时，切换一个元素的显示或隐藏状态。

如果看官还没有掌握上篇文章中的v-if用法的话，建议不要往下看了哦~

三、v-show实例

先来实现静态的html代码。

3.1、html代码

v-show可以控制元素的显隐状态，点击下面的按钮可看到效果。

Toggle

ok：{{ok}}

注意上面黄色高亮部分，第一处就是一个v-show语法，第二处是添加一个自定义事件，下面开始js代码

3.2、js代码

var vm=new Vue({

el:'#app'

,data:{

ok:true

}

,methods:{

Toggle:function(){

this.ok=!this.ok;

}

})

为了让看官能看到效果，需要体验的看官可以点我去体验下demo。

现在看官点击demo页面中的Toggle按钮，就可以切换文字的显隐状态了。注意上面js代码中黄色高亮的部分，这个在上篇文章中没有出现过，看官可以当成是第四种方法。

四、v-if和v-show的区别

今天我们实践了一下这个v-show，表面上实现了跟上次v-if一样的效果，但实质上，这两个还是有所区别的。

下面的解释来自Vue官方。

详情地址：http://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show

v-if是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。

v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。

相比之下，v-show简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说，v-if有更高的切换消耗而v-show有更高的初始渲染消耗。因此，如果需要频繁切换使用v-show较好，如果在运行时条件不大可能改变则使用v-if较好。

为了更好的理解，看官可以打开上篇文章中的例子和本文的例子，然后在打开浏览器的控制台，点击按钮时看下两个例子中的html源码发生的变化。配图一张：

----------完----------

转载声明：

若亲想转载本文到其它平台，请务必保留本文出处！

本文链接：http://www.yilingsj.com/jquery/2017-02-20/482.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

v-show组件 vue_Vue.js实例之v-show用法相关推荐

v-show组件 vue_Vue.js教程--基础(实例模版语法template computed, watch v-if, v-show v-for, 一个组件的v-for.)...
官网:https://cn.vuejs.org/v2/guide/index.html Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统. 视频教程:https: ...
component多个 vue_Vue.js之组件（component）
从结构上看,组件之于实例,就好比轮子之于汽车.从属性和方法来看,组件有实例的大部分方法,如果Vue实例是孙悟空,组件就好比实例的一个毫毛,变化多端却为Vue实例所用. 目录: 组件的注册 is的作用 ...
【js实例】Array类型的9个数组方法,Date类型的41个日期方法,Function类型
前文提要:[js实例]js中的5种基本数据类型和9种操作符 Array类型的9个数组方法 Array中有9个数组方法: 1.检测数组 2.转换方法 3.栈方法 4.队列方法 5.冲排序方法 6.操作方 ...
vue 生成发布包_年轻人如何从0到1封装发布一个vue组件__Vue.js
封装发布组件是前端开发中非常重要的能力,通过对常用组件的封装可以提升团队开发的效率,避免重复劳作且不方便维护.好的组件的抽象和封装能让组件得到更广泛和多环境兼容的应用. 本文讲述了如何一步步从0到1封 ...
强大的图片预览组件Viewer.js
1. Viewer.js简介 Viewer.js 是一款强大的图片查看器.我们通过Viewer.js 在页面上添加强大的图片查看功能,同时,这款优秀的插件配置操作起来也非常的方便. Viewer. ...
模块开发之时间/日期组件moment.js使用(十四)
文章目录前言基本使用 moment与字符串想到转换当前时间语法创建moment实例的方式时间字符串+指定格式时间字符串+多定格式 moment完全支持iso-8601格式字符串以对象形 ...
JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3
技术非常多,样例非常多.仅仅好慢慢学,慢慢实践!!如今学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQ ...
[react] 什么是React的实例？函数式组件有没有实例？
[react] 什么是React的实例?函数式组件有没有实例? React的实例:通过继承React.Component的类生成函数式组件没有实例个人简介我是歌谣,欢迎和大家一起交流前后端知识. ...
vector＜int＞ v, vector＜int＞ v(n) 与vector＜int＞ v[n]的区别
一.vector<int> v表示声明一个容器v,并且不给他预定存储空间. 运行: vector<int> v;cout << v.size(); 输出为: 0 二 ...

v-show组件 vue_Vue.js实例之v-show用法

v-show组件 vue_Vue.js实例之v-show用法相关推荐

最新文章

热门文章