当前位置: 首页 > 编程笔记 >

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

百里星纬
2023-03-14
本文向大家介绍图文讲解vue的v-if使用方法,包括了图文讲解vue的v-if使用方法的使用技巧和注意事项,需要的朋友参考一下

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

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

代码:

<div id="app">

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

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

</div>

 

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

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

代码:

<script>

var app = new Vue({

el:"#app"

})

</script>

 

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

代码:

data:{

flage:true

}

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

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

 类似资料:
  • 本文向大家介绍对vue v-if v-else-if v-else 的简单使用详解,包括了对vue v-if v-else-if v-else 的简单使用详解的使用技巧和注意事项,需要的朋友参考一下 首先vue.js请注意 2.1.0版本以上方可使用v-else-if 页面展示如下: vue.js下载:https://github.com/vuejs/vue 以上这篇对vue v-if v-els

  • 本文向大家介绍实例讲解v-if和v-show的区别,包括了实例讲解v-if和v-show的区别的使用技巧和注意事项,需要的朋友参考一下 代码: 没点击前的图 点击后的图 显示来看v-if 是“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建;而v-show 不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。 一般来说, v-if 有

  • 本文向大家介绍Vue中的v-cloak使用解读,包括了Vue中的v-cloak使用解读的使用技巧和注意事项,需要的朋友参考一下 v-cloak 的作用和用法 用法: 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。官方API HTML 绑定 Vue实例,

  • 本文向大家介绍使用vue-router与v-if实现tab切换遇到的问题及解决方法,包括了使用vue-router与v-if实现tab切换遇到的问题及解决方法的使用技巧和注意事项,需要的朋友参考一下 vue-router 该如何使用 忽然碰到一个常见的问题,明明可以使用 v-if / v-show 可以的解决的问题,有没有必要是使用 vue-router来解决。 比如常见的 tab 切换。一时间,

  • 本文向大家介绍如何区分vue中的v-show 与 v-if,包括了如何区分vue中的v-show 与 v-if的使用技巧和注意事项,需要的朋友参考一下 1. v-show 不管初始的条件是什么,元素总是会被渲染,并且只是简单的基于 CSS display: none 或者 display: block 的属性进行切换。 2. v-if 会根据初始的条件(data里自己的定义的数据)来进行真正的渲染

  • 本文向大家介绍vue中$nextTick的用法讲解,包括了vue中$nextTick的用法讲解的使用技巧和注意事项,需要的朋友参考一下 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时,我们经常用到一个方法是this.$nextTick,相信你也用过。我常用的场景是在进行获取数据后