对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 相关文章推荐
javascript 尚未实现错误解决办法
Nov 27 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
详解vue组件之间的通信
Aug 30 Javascript
总结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
用PHP将数据导入到Foxmail
2006/10/09 PHP
php array_walk() 数组函数
2011/07/12 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
半角全角相互转换的js函数
2009/10/16 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
jQuery使用方法
2017/02/04 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
python 生成目录树及显示文件大小的代码
2009/07/23 Python
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
python线程的几种创建方式详解
2019/08/29 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
新学期家长寄语
2014/01/19 职场文书
促销活动计划书
2014/05/02 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
幼师中班个人总结
2015/02/12 职场文书
Python torch.flatten()函数案例详解
2021/08/30 Python
python图像处理 PIL Image操作实例
2022/04/09 Python