图文讲解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等宽输出文字插件使用介绍
Sep 18 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
JavaScript模块详解
Dec 18 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
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
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
javascript整除实现代码
2010/11/23 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
关于NodeJS中的循环引用详解
2019/07/23 NodeJs
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
详解python3百度指数抓取实例
2016/12/12 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
在Mac上删除自己安装的Python方法
2018/10/29 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
python实现贪吃蛇双人大战
2020/04/18 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
质量保证书范本
2014/04/29 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
北京爱情故事观后感
2015/06/12 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书