对vue中v-if的常见使用方法详解


Posted in Javascript onSeptember 28, 2018

使用过Vue的小伙伴一定使用过v-if 这个属性,但是这个属性主要是来干什么的呢,他得用途是那些?

这里我总结了一下,v-if使用一般有两个场景:

1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素

2- 进行两个视图之间的切换

下面我写了两个例子,是Vue官方的简单实例。

第一个实例实现了 type等于不同值,A,B,C 三个元素的展示情况。

第二个例子实现了,点击按钮实现两个视图的切换。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Vue中v-if的常见使用</title>
 <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<script>
window.onload = function(){

 //创建一个vue实例
 var app = new Vue({
 el: '#app',
 data: {
  type:'C',
  loginType:'username'
 },
 methods:{
  changeloginType(){
  let self = this;
  if(self.loginType=='username'){
   self.loginType = ''
  }else{
   self.loginType = 'username'
  }
  }
 }
 })
}

</script>
<body>
 <div id="app">
 <div style="color:red">v-if的简单实用</div>
 <template>
  <div v-if="type == 'A'">
  A
  </div>
  <div v-else-if="type=='B'">
  B
  </div>
  <div v-else>
  C
  </div>
 </template>
 <div style="color:green">v-if的弹框切换</div>
 <template v-if="loginType === 'username'">
  <label>用户名:</label>
  <input placeholder="Enter your username" key="username-input">
 </template>
 <template v-else>
  <label>密码:</label>
  <input placeholder="Enter your email address" key="email-input">
 </template>
 <button @click="changeloginType">切换状态</button>
 </div>
</body>
</html>

效果图:

对vue中v-if的常见使用方法详解

对vue中v-if的常见使用方法详解

以上这篇对vue中v-if的常见使用方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 学习笔记 选择器之五
Jul 23 Javascript
javascript 动态生成私有变量访问器
Dec 06 Javascript
基于jquery的一个图片hover的插件
Apr 24 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
15个顶级开源JavaScript框架和库
Oct 10 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
总结javascript三元运算符知识点
Sep 28 #Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 #Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 #Javascript
js隐式转换的知识实例讲解
Sep 28 #Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 #Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 #Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 #Javascript
You might like
基于pear auth实现登录验证
2010/02/26 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
js document.write()使用介绍
2014/02/21 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
2016/08/08 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
Python中使用PIPE操作Linux管道
2015/02/04 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
Python装饰器简单用法实例小结
2018/12/03 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
python实现二维数组的对角线遍历
2019/03/02 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
创建省级文明单位实施方案
2014/02/27 职场文书
十八大标语口号
2014/10/09 职场文书
滞留工资返还协议书
2014/10/19 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
党员违纪检讨书怎么写
2014/11/01 职场文书
2014年财政所工作总结
2014/11/22 职场文书
房租涨价通知
2015/04/23 职场文书
2015大学迎新标语
2015/07/16 职场文书
结婚典礼致辞
2015/07/28 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python