图文讲解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 相关文章推荐
事件模型在各浏览器中存在差异
Oct 20 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
vue弹窗消息组件的使用方法
Sep 24 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
Angular2中监听数据更新的方法
Aug 31 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 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源代码
2006/10/09 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
php文件操作实例代码
2012/05/10 PHP
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
JS 按钮点击触发(兼容IE、火狐)
2013/08/07 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
javascript常用函数(1)
2015/11/04 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
2017/05/25 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
wxPython 入门教程
2008/10/07 Python
Python写的一个简单DNS服务器实例
2014/06/04 Python
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
英国袜子店:Sock Shop
2017/01/11 全球购物
房产转让协议书
2014/04/11 职场文书
经理岗位职责范本
2015/04/15 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
详解MySQL主从复制及读写分离
2021/05/07 MySQL
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python