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

使用过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的常见使用方法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js 使用v-if v-else发现没有执行解决办法

    使用v-if v-else发现没有执行 最近在学习Vue,因为刚开始学习,所以总会遇到这样那样的问题,今天要说的一个错误就是在看Vue的官方文档的时候,发现在使用v-if和v-else指令的时候,相应的内容都出现了 初始代码: <div v-if="Math.random > 0.5"> " Math.random > 0.5 " </div> <div v-else> " Math.random <=

  • Vue.js使用v-show和v-if的注意事项

    Vue.js使用v-show和v-if的注意事项

    关于两者的区别,官网是这样说的: 在切换 v-if 块时,Vue.js 有一个局部编译/卸载过程,因为 v-if 之中的模板也可能包括数据绑定或子组件.v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做--在条件第一次变为真时才开始局部编译(编译会被缓存起来). 相比之下,v-show 简单得多--元素始终被编译并保留,只是简单地基于 CSS 切换. 一般来说,v-if 有更高的切换

  • Vue.js常用指令汇总（v-if、v-for等）

    Vue.js常用指令汇总（v-if、v-for等）

    有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素: eg: HTML: <div id="example01"> <p v-if="male">Male</p> <p v-if=&qu

  • vue学习笔记之v-if和v-show的区别

    vue学习笔记之v-if和v-show的区别

    v-if vs v-show v-if 是"真正的"条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建. v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做--直到条件第一次变为真时,才会开始渲染条件块. 相比之下, v-show 就简单得多--不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换. 一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销.因此,如果需要非常频繁地切换,则使用 v-sh

  • 深入理解vue.js中的v-if和v-show

    深入理解vue.js中的v-if和v-show

    本文主要给大家介绍了关于vue.js中v-if和v-show的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 1.共同点 都是动态显示DOM元素 2.区别 (1)手段:v-if是动态的向DOM树内添加或者删除DOM元素:v-show是通过设置DOM元素的display样式属性控制显隐: (2)编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件:v-show只是简单的基于css切换: (3)编译条件:v-if是惰性的,如果初始条件为假,

  • Vue中添加滚动事件设置的方法详解

    一.问题发现 在看Vue的事件文档中,测试scroll事件发现如下是行不通的,触发不了scroll事件, 经过一番搜寻未找到原因,不过找到了另外两种在Vue中设置滚动事件. <div @scroll='showOut'></div> 二.原因分析 暂无 三.解决办法 1.直接利用mousewheel事件替代scroll事件 <div @mousewheel='showOut'></div> mousewheel鼠标滚轮,显而易见动动鼠标滚轮就能触发事件,但是

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

    使用过Vue的小伙伴一定使用过v-if 这个属性,但是这个属性主要是来干什么的呢,他得用途是那些? 这里我总结了一下,v-if使用一般有两个场景: 1- 多个元素 通过条件判断展示或者隐藏某个元素.或者多个元素 2- 进行两个视图之间的切换 下面我写了两个例子,是Vue官方的简单实例. 第一个实例实现了 type等于不同值,A,B,C 三个元素的展示情况. 第二个例子实现了,点击按钮实现两个视图的切换. <!DOCTYPE html> <html lang="en"&

  • vue中datepicker的使用教程实例代码详解

    写这个文章主要是记录下用法,官网已经说的很详细了 npm install vue-datepicker --save html代码 <myDatepicker :date="startTime" :option="multiOption" :limit="limit"></myDatepicker> <myDatepicker :date="endtime" :option="timeo

  • vue中{{}},v-text和v-html区别与应用详解

    vue中{{}},v-text和v-html区别与应用详解

    {{}}获取值,不会清空标签原有内容 v-text 获取值,会清空标签原有内容,输出的是纯文本 v-html 获取值,会清空标签原有内容,若数据中包含html标签,将其当html标签解析后输出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <

  • VUE中的mapState和mapActions的使用详解

    最近在开发一套系统,前端使用VUE开发,由于本人是后端开发,前端也会一点,但是VUE接触不多,在VUE项目开发遇到的一些坑记录一下,不是专业前端写好的不好,大家不要唝... 在VUE项目中经常会用到mapState和mapActions,mapState主要用于同步全局的变量或者对象,mapActions主要是用于同步定义的方法,一般两者是结合使用,mapState同步项目中定义的全局的变量或者对象,mapActions是用于变量或者对象为空时,调用方法定义的全局方法获取. mapActions

  • Vue 中的 computed 和 watch 的区别详解

    目录 computed 注意 应用场景 watch 总结 computed computed 看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed 的值在 getter 执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取 computed 的值时才会重新调用对应的 getter 来计算. 1)下面是一个比较经典简单的案例 <template> <div class="hello"> {{ful

  • Vue中mixins混入的介绍与使用详解

    目录 一.来自官网的描述 二.如何创建Mixins 三.项目中如何使用混入 四.与vuex的区别 五.与公共组件的区别 一.来自官网的描述 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 二.如何创建Mixins 在src目录下创建一个mixins文件夹,文件夹下新建一个myMixins.js文件.前面我们说了mixins是一个js对象,所以应该以对象的形式来定义my

  • Vue中watch清除过期副作用的案例详解

    在这里就不过多说watch的用法了,主要了解一下如何清除过期的副作用 通过一个案例来说吧: 一个可搜索的下拉选择器,用户第一次进行搜索的时候网速比较慢,请求虽然被服务端正确响应了,但是数据一直没有传输到客户端,用户看下拉数据没变化 就第二次搜索.第二次搜索之后网速恢复正常了,第二次请求的数据很快就客户端接收且正确渲染:紧接着第一次的数据也被客户端接收且客户端正确渲染. 这样就可能存在这样一种情况,第一次请求,服务端响应了请求但数据还没被客户端接收的时候,有人修改了数据:然后用户又点击刷新,响应数

  • 如何在程序中判断VS的版本(实现方法详解)

    代码如下所示: #include<iostream> using namespace std; int main() { cout << _MSC_VER << endl; return 0; } 在VC6.0中结果为:1200 在VC10.0(VS2010)中结果为:1600 _MSC_VER实际就是 Microsoft visual c++ version(是微软的预定义宏). 具体对应如下: MS VC++ 14.0 _MSC_VER = 1900(VS2015)

  • vue.js 双层嵌套for遍历的方法详解, 类似php foreach()

    主要运用 template 标签,可相当于 php foreach() foreach(lists as $key){ //todo foreach($key.自定义字段 as k){ //todo } } <template v-for="key in lists" v-cloak> <tr> <td></td> <td ></td> <td ></td> <td ></

随机推荐