七、条件渲染v-if的使用
时间:2021-09-06
本文章向大家介绍七、条件渲染v-if的使用,主要包括七、条件渲染v-if的使用使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、v-if指令,用于条件性地渲染一块内容。
1> 只有指令的表达式返回true的时候,文档中对应的DOM元素才能被渲染。
2> 使用指令v-if='false'的标签,从文档中真正删去了这个DOM元素。
3> 用 v-if 作三元运算符,返回结果不是boolen类型的话是没有意义的,因为只有指令的表达式返回true的时候,被渲染。
4> template标签是Vue的模板标签,使用指令v-if='false'后,可以使该标签内的所有内容都从文档上消失。(推荐:tempalte标签和v-if配合使用效果最好,可以作 条件判断或者逻辑判断。)
2、指令v-if搭配v-else使用,可以做逻辑true/false的判断(基于判断结果再去做业务逻辑)。
指令v-if搭配v-else-if和v-else使用,可以做多条件逻辑的判断(基于判断结果再去做业务逻辑)。
(注意使用这两个指令的两个标签必须是同类型标签,且必须是同级标签,且是前后顺序使用)
3、v-if 加 key 值的作用:
1> Vue在渲染元素时,会尽可能地复用已有的元素而非重新渲染,这么做会使Vue渲染效率变得非常高。
2> 但是在开发中会出现我们不想要的结果。
比如:在输入框中,输入一下内容,单击按钮切换,会发现之前输入的内容被保留了下来。
3> 用key就可以解决这个问题。
<template> <div v-if="loginType=='1'"> 手机号:<input type="text" placeholder="请输入手机号" key="1"> <!--8、搭配key使用,可以重新渲染dom元素,清除dom元素的原有内容--> </div> <div v-else> E-mail:<input type="text" placeholder="请输入E-mail" key="2"> <!--注意,key的值必须是Number或者String,且必须是值唯一不能重复。--> </div> <button type="button" v-on:click="loginType=( loginType=='1'?'2':'1' )">切换登录模式</button> </template> <script> let data={ loginType:'1' }; </script>
原文地址:https://www.cnblogs.com/Strugglinggirl/p/15235614.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 急速 debug 实战一(浏览器-基础篇)
- MongoDB系列一: Replica Set 集群搭建实战
- 函数式编程看React Hooks(一)简单React Hooks实现
- 函数式编程看React Hooks(二)事件绑定副作用深度剖析
- Vue 开发必须知道的 36 个技巧【近1W字】
- 吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧《上》
- 【漫游Github】无编译/无服务器,实现浏览器的 CommonJS 模块化
- 《秋风日常第一期》白板协作工具 LeanBoard
- 《秋风日常第二期》一个快速找出待SEO图片的技巧
- 《模块化系列》snowpack,提高10倍打包速度。
- 《秋风日常第三期》11个前端开发者必备的网站
- 专为程序员定制的垃圾清理工具(Node Cli实现)
- CodePen vue SFC 、flutter 在线玩耍来袭
- [重拾CSS]一道面试题来看伪元素、包含块和高度坍塌
- webpack 拍了拍你,给了你一份图解指南(模块化部分)