图文讲解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 相关文章推荐
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
jQuery find和children方法使用
Jan 31 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 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会话(session)说明介绍
2016/08/21 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
vue实现在线翻译功能
2019/09/27 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
python字符串连接方式汇总
2014/08/21 Python
python中的__slots__使用示例
2015/02/26 Python
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
Python实现冒泡排序的简单应用示例
2017/12/11 Python
Python基于Flask框架配置依赖包信息的项目迁移部署
2018/03/02 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
python实现五子棋小游戏
2020/03/25 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
Python-for循环的内部机制
2020/06/12 Python
Python 解析简单的XML数据
2020/07/24 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
公司JAVA开发面试题
2015/04/02 面试题
extern是什么意思
2016/03/10 面试题
金融专业毕业生自荐信
2014/06/26 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
交通安全温馨提示语
2015/07/14 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
Python的property属性详细讲解
2022/04/11 Python