欢迎来到[自学php网] ①群 AG亚游集团

AG亚游集团 > 网站前端 > vue教程 >

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

来源:未知 ?? 时间:2018-11-04 14:38?作者:小飞侠

[导读] 使用过Vue的小伙伴一定使用过v-if 这个属性,但是这个属性主要是来干什么的呢,他得用途是那些? 这里我总结了一下,v-if使用一般有两个场景: 1- 多个元素 通过条件判断展示或者隐藏...

使用过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="/cdnaff4bootcssaff4com/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>

效果图:


image.png


image.png


以上这篇对vue中v-if的常见使用方法详解就是小编分享给大家的全部内容了,

希望能给大家一个参考,请大家多多支持自学php网,www.zixuephp.com.

最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有AG亚游集团

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

扎克伯格将就数据丑闻受欧洲议员质询 并网络直播 恩智浦CEO:本来值得考虑延长高通收购案的最后期限 什么鬼地方?被勇士选中时汤神不知金州在何处 美媒曝光尴尬细节:特朗普曾令蒂勒森在国宴吃沙拉 我在优衣库体验了一把抢购潮:Jump联名T恤一件难求 离世半年 为什么夺冠后辛普森谈的最多的人是他 8岁男童被商场扶梯夹伤鲜血直流 官方已查封电梯 GTHFX金钻集团:贸易战忧虑稍减 金价退守1320关 河南贾灵敏诉郑州市政府案开庭 源于未被立案争议 库克:尽可能少收集用户信息,怀念乔布斯精益求精 沪浙皖三地互金协会联合呼吁:严打网贷恶意逃废债 冯远征谈反家暴法两周年:我可能算是反家暴法先驱
媒评:别把VAR技术用错了地方 过度依赖降低裁判权威 小猪佩奇一年吸金70亿 走红背后有这个套路 中日韩关键时刻展现团结 三方会议重塑东亚关系 安徽太和法院拆错房屋? 院长:申请执行人的错 亚太股市周二多数上扬 日本股市创逾26年新高 NBA第20号攻击手超logo男!但他输出只够打半场 广州站-青春有料海马赛事战报 美国参院投票支持恢复网络中立性原则 林良铭阿尔梅里亚B队送助攻 一队主教练夸其表现 欧盟发布保护云数据个人隐私技术成果 怡安宣布与美巡赛合作推全球首个风险挑战排名奖 小偷被便衣民警追捕 误以为被追杀直奔派出所求助
佩雷拉:亚冠可能会有轮换 对手体能比我们好 股指短期上行受阻 华为将允许用户通过其应用商店下载安装比特币钱包 美第二大私企出资拍了条广告片:开放市场不要关税 出海记|直播平台斗鱼考虑弃港股赴美IPO 冬奥速滑女子集体出发日本摘金 中国双姝错失奖牌 联盟最稳队又晃点!进不了季后赛就是个大谎言 醉酒男打伤交警并阻挠执法 3人被刑拘1人被警告 互金专委会:累计发现假虚拟货币421种 60%以上在境… 利润最高的不起眼行业 白手起家的成功案例 过年摆地摊赚10万 养殖什么不愁销路 AG亚游集团