图文讲解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的。

赞 (0)

相关推荐

  • Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法

    vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然后再消失掉,如果要解决这个问题,案例如下: vue html代码块: <div id="divApp"> <div v-if="type === 'A'" v-cloak> A </div> <div v-else-if="type === 'B'" v-cloak> B </div> <div v-e

  • vue使用v-if v-show页面闪烁,div闪现的解决方法

    在页面层次结构,数据较多的时候,用v-if或者v-show就会出现div闪现,或者部分闪烁的结果. 可以在根元素添加v-cloak来解决,并且设置它的样式即可. 代码只是示例,还需要自己修改测试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>

  • 详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on

    Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute). Vue.js提供了一些常用的内置指令,如下: v-if指令 v-for指令 v-show指令 v-else指令 v-bind指令 v-on指令 1:v-if指令 v-if指令是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下: v-if="expression"

  • 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中 v-if/v-show/插值表达式导致闪现的原因及解决办法

    在开发过程中经常会发现当页面明明不应该出现的元素或内容会闪现一下然后消失,最近研究了一下这个问题的原因和解决办法,这里和大家分享一下. 1.闪现的原因 这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译,所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况.因为在这些判断条件或表达式执行之前,DOM已经渲染出来了,之后Vue才会执行相应的JS代码. 2.解决的办法 其实在了解了原因之后我们就有了大概的思路,既然是在JS执行之前会出

  • 通过图文讲解Tomcat部署war包的方法步骤

    通过图文讲解Tomcat部署war包的方法步骤

    目录 一.环境 二.步骤 总结 一.环境 1.Tomcat:本次测试的版本为Tomcat8.5(Tomcat下载官网:Apache Tomcat® - Welcome!): 2.war包:本次已在开发工具IDEA或Eclipse生成了war文件(JavaWebTest.war),若还不会在开发工具将项目打成war包的,请另行百度. 二.步骤 1.解压官网下载的Tomcat到任一目录下,然后将其war包JavaWebTest.war复制粘贴到apache-tomcat-8.5\webapps\RO

  • 图文讲解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时显示</d

  • Vue基本指令实例图文讲解

    Vue基本指令实例图文讲解

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 一. v-on指令 1. 基础用法 v-on是事件监听的指令, 下面来看简单用法 <!DOCTYPE html> <html lang="en"&

  • VM12 虚拟机使用桥接模式却连不上网的解决方法(图文讲解)

    写计算机网络作业时遇见一个问题:虚拟机的IP.子网掩码.默认网关设置得与宿主机一致,但死活ping不通外网.内网. 折腾了一晚上终于知道问题出在哪儿了... 只需将VM的虚拟网络编辑器中关于 VMnet0 的设置改一下就行了: 1.进入VMware的 编辑 -> 虚拟网络编辑器. 2.选择更改设置. 3.将VMnet0(或其它类型为桥接模式的网络适配器)桥接的网卡由默认的"自动"改为连上互联网的网卡(如图). 4.由于我是通过WIFI连网,因此我选择WLAN接口(高通网卡),使用

  • vue router 路由跳转方法讲解

    目录 一.概述 二.跳转方法 1.使用router-link标签 2.使用router-replace 3.使用router-push 三.路由中params和query的区别 一.概述 使用到Vue的项目,我们最常见使用的就是Vue配套的Vue Router库. 那么在平日开发中,有多少种跳转路由的方法? 二.跳转方法 1.使用router-link标签 使用router-link标签,我们通常会使用到2个参数,最常用的就是to参数to参数,表示你想要跳转到的路由对象 router-link标

  • 图文介绍Vue父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属性绑定并赋值给子组件 5:子组件通过 props 接收父组件传递过的数据 6:查看 7:总结: 子组件在props中创建一个属性,用以接收父组件传过来的值父组件中注册子组件在子组件标签中添加子组件props中创建的属性把需要传给子组件的值赋给该属性 您可能感兴趣的文章: VUEJS 2.0 子组件访

  • vue实现跨域的方法分析

    vue实现跨域的方法分析

    本文实例讲述了vue实现跨域的方法.分享给大家供大家参考,具体如下: 在请求的资源上没有"访问控制允许源"标头.因此,"http://LoalHoal:8081"是不允许访问的. 出现这个报错就说明,浏览器限制了跨域,需要设置跨域 一.后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方

  • Vue 中使用 typescript的方法详解

    什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 安装typescript npm install -g ty

  • Node.js+Vue脚手架环境搭建的方法步骤

    Node.js的下载 node下载地址:https://nodejs.org/zh-cn/download/ 下载后安装即可.新版Node.js自带npm包管理器 # 查看node的版本 node -v # v12.16.1 # 查看npm版本 npm -v #6.13.4 第一个Node.js程序,新建helloworld.js文件,内容如下 console.log("Hello World") console.log("第一个Node.js程序!") 进入终端

  • phpstudy的安装及ThinkPHP框架的搭建图文讲解

    phpstudy的安装及ThinkPHP框架的搭建图文讲解

    我们开始学习ThinkPHP框架,第一件事是要在自己的电脑上安装一个php的服务器,其实很简单.只需要下载一个phpstudy即可.phpstud集成了Apache+MySQL+phpMyadmin,一次性安装,且不需要配置即可使用.是非常好用的PHP调试环境. 一.phpstudy下载及安装 直接搜狗phpstudy.会出现以下界面. 直接点击下载,然后按照默认的安装就可以了. 当下载完成并启动运行会出现一下界面: 我们查看看一下其他选项菜单下的phpstudy设置下的端口常规设置 会看到一下

随机推荐