图文讲解vue的v-if使用方法


Posted in Javascript onFebruary 11, 2019

vue提供了一个用于判断的v-if 、v-else语法,可以通过v-if和v-else进行内容的显示与隐藏。下面将通过使用v-if、v-else进行数据的显示与隐藏

图文讲解vue的v-if使用方法

1、新建一个html页面,然后创建一个div设置id为app,然后在这个div里面创建两个div,同时给这两个div设置不同的文本。

代码:

<div id="app">

<div>当flage为true时显示</div>

<div>当flage为false时显示</div>

</div>

图文讲解vue的v-if使用方法 

2、引入vue.js。在body结束标签前面使用引入vue.js文件。

图文讲解vue的v-if使用方法

3、创建vue挂载点。在vue.js引入文件后面新建一个<sctipt>标签,然后使用new Vue()创建挂载点。

代码:

<script>

var app = new Vue({

el:"#app"

})

</script>

图文讲解vue的v-if使用方法 

4、添加用于v-if、v-esle判断的falge数据。使用vue提供的data对flage设置值为true。

代码:

data:{

flage:true

}

图文讲解vue的v-if使用方法

5、保存html后使用浏览器打开,即可看到v-if设置为true是的数据。

图文讲解vue的v-if使用方法

6、回到html代码页面,把flage修改为false,保存后刷新页面,会看到显示的内容为v-else的。

图文讲解vue的v-if使用方法

图文讲解vue的v-if使用方法

Javascript 相关文章推荐
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
详解JavaScript权威指南之对象
Sep 27 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
vue实现todolist基本功能以及数据存储功能实例详解
Apr 11 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
JavaScript 反射学习技巧
Oct 16 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 #Javascript
ES6 更易于继承的类语法的使用
Feb 11 #Javascript
总结4个方面优化Vue项目
Feb 11 #Javascript
JavaScript 九种跨域方式实现原理
Feb 11 #Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 #Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 #Javascript
如何用JavaScript实现功能齐全的单链表详解
Feb 11 #Javascript
You might like
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
PHP简单实现DES加密解密的方法
2016/07/12 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
JavaScript库 开发规则
2009/01/31 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
js 窗口抖动示例
2013/09/04 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
vue中v-model对select的绑定操作
2020/08/31 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
详解Python的单元测试
2015/04/28 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
python pygame实现2048游戏
2018/11/20 Python
python opencv捕获摄像头并显示内容的实现
2019/07/11 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
python退出循环的方法
2020/06/18 Python
Python调用飞书发送消息的示例
2020/11/10 Python
HTML5实现简单图片上传所遇到的问题及解决办法
2016/01/20 HTML / CSS
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
自荐信不宜过于夸大
2013/11/06 职场文书
最新个人职业生涯规划书
2014/01/22 职场文书
电视购物广告词
2014/03/19 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
会议接待欢迎标语
2014/10/08 职场文书
学生检讨书如何写
2014/10/30 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL