对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 相关文章推荐
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
jQuery处理图片加载失败的常用方法
Jun 08 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
基于layui数据表格以及传数据的方式
Aug 19 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
JSON的parse()方法介绍
Jan 31 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 Javascript
vue.js+element 默认提示中英文操作
Nov 11 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
总结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
在PHP3中实现SESSION的功能(二)
2006/10/09 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
javascript 面向对象编程基础:继承
2009/08/21 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
为vue项目自动设置请求状态的配置方法
2019/06/09 Javascript
微信小程序Echarts覆盖正常组件问题解决
2019/07/13 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
使用PyCharm官方中文语言包汉化PyCharm
2020/11/18 Python
基于 HTML5 WebGL 实现的垃圾分类系统
2019/10/08 HTML / CSS
俄罗斯优惠券网站:BIGLION
2017/05/21 全球购物
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
办公室员工岗位工作职责
2014/03/10 职场文书
计划生育汇报材料
2014/12/26 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
宾馆卫生管理制度
2015/08/06 职场文书