对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的多级联动代码
Jan 24 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
jquery提示效果实例分析
Nov 25 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 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输出缓存(output_buffering)的深入理解
2013/06/13 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
JS前向后瞻正则表达式定义与用法示例
2016/12/27 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
Python实现拷贝多个文件到同一目录的方法
2016/09/19 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
python实现点对点聊天程序
2018/07/28 Python
python实现汉诺塔算法
2021/03/01 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
利用Python计算KS的实例详解
2020/03/03 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
python常量折叠基础知识点讲解
2021/02/28 Python
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
档案接收函
2014/01/13 职场文书
数学教学随笔感言
2014/02/17 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
护林防火标语
2014/06/27 职场文书
责任书范本大全
2015/05/11 职场文书
python中的装饰器该如何使用
2021/06/18 Python