当前位置:首页 > 编程教程 > vue技术文章 > 图文讲解vue的v-if使用方法

vue中v-if使用方法详解

  • 发布时间:
  • 作者:码农之家
  • 点击:173

这篇文章主要知识点是关于vue、v-if、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript+Vue+React全程实例
  • 类型:JS实例大小:59150 MB M格式:PDF作者:郑均辉,薛燚
立即下载

Tags:Vue v-if 

图文讲解vue的v-if使用方法

vue提供了一个用于判断的v-if 、v-else语法,可以通过v-if和v-else进行内容的显示与隐藏。下面将通过使用v-if、v-else进行数据的显示与隐藏

图文讲解vue的v-if使用方法

1、新建一个html页面,然后创建一个div设置id为app,然后在这个div里面创建两个div,同时给这两个div设置不同的文本。

代码:

<div id="app">

<div>当flage为true时显示</div>

<div>当flage为false时显示</div>

</div>

图文讲解vue的v-if使用方法

2、引入vue.js。在body结束标签前面使用引入vue.js文件。

图文讲解vue的v-if使用方法

3、创建vue挂载点。在vue.js引入文件后面新建一个<sctipt>标签,然后使用new Vue()创建挂载点。

代码:

<script>

var app = new Vue({

el:"#app"

})

</script>

图文讲解vue的v-if使用方法

4、添加用于v-if、v-esle判断的falge数据。使用vue提供的data对flage设置值为true。

代码:

data:{

flage:true

}

 

图文讲解vue的v-if使用方法

5、保存html后使用浏览器打开,即可看到v-if设置为true是的数据。

图文讲解vue的v-if使用方法

6、回到html代码页面,把flage修改为false,保存后刷新页面,会看到显示的内容为v-else的。

图文讲解vue的v-if使用方法

图文讲解vue的v-if使用方法

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

vue 相关电子书
学习笔记
网友NO.277659

vue中的v-if和v-show的区别详解

v-if和v-show的区别是前端面试中常问的基础知识点,v-if、v-show顾名思义就是用来判断视图层展示效果的。那么具体是怎么展示呢?v-if和v-show的区别又是什么呢? 首先我们可以来看一下Vue中文社区说明文档的介绍: Vue中文社区说明文档中简单来说是:初始渲染的时候进行条件判断展示; 在实际开发中我们会经常使用到v-if和v-show来进行判断展示,我们可以这么理解: div class="tc" v-if="pload list.length1" img src="../assets/img/mall_none_order.png" //div 上面的实例中,v-if的作用是通过pload和list.length是否1来判断这个div是否展示,因为是并且关系,只有当pload和list.length1两个成立都成立的时候这个div和里面的img才展示和生效, 反之如果判断条件不成立的时候,v-if则不会展示; div class="tc" v-show="pload list.length1" img src="../assets/img/mall_none_order.png" //div 上面的案例代码我们其实也……

网友NO.854369

Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法

在开发过程中经常会发现当页面明明不应该出现的元素或内容会闪现一下然后消失,最近研究了一下这个问题的原因和解决办法,这里和大家分享一下。 1.闪现的原因 这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译,所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况。因为在这些判断条件或表达式执行之前,DOM已经渲染出来了,之后Vue才会执行相应的JS代码。 2.解决的办法 其实在了解了原因之后我们就有了大概的思路,既然是在JS执行之前会出现,那就让元素在JS执行之前都保持不显示就好了。那事情就分为两步: 选择在JS执行前要隐藏的元素 添加display:none样式 如何只定位JS执行前的元素呢?Vue有一个指令 v-cloak ,它的特殊之处在于 保持在元素上直到关联实例结束编译 。就是说这个属性会一直在元素上,直……

网友NO.819058

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

使用过Vue的小伙伴一定使用过v-if 这个属性,但是这个属性主要是来干什么的呢,他得用途是那些? 这里我总结了一下,v-if使用一般有两个场景: 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素 2- 进行两个视图之间的切换 下面我写了两个例子,是Vue官方的简单实例。 第一个实例实现了 type等于不同值,A,B,C 三个元素的展示情况。 第二个例子实现了,点击按钮实现两个视图的切换。 !DOCTYPE htmlhtml 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" titleVue中v-if的常见使用/title script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"/script/headscriptwindow.onload = function(){ //创建一个vue实例 var app = new Vue({ el: '#app', data: { type:'C', loginType:'username' }, methods:{ changeloginType(){ let self = this; if(s……

<
1
>

电子书 编程教程 PC软件下载 安卓软件下载

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757