vue中v-show v-if v-bind的使用

v-show：用于控制页面的标签元素是否展示，底层通过控制元素的display属性来进行标签的显示与隐藏控制

v-if：同样用于控制页面中的标签元素是否展示，底层通过对dom树节点进行添加和删除来控制显示与隐藏控制，效率要低于v-show

v-bind：用于给页面中的标签属性绑定相应的属性

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><div id="num"><p v-show="isShow">{{number}}</p><p v-if="isShow">{{number}}</p><input type="button"  v-bind:value="msg" @click="hideOrShow"></div>
<script>const num = new Vue({el:"#num",data:{number:0,msg:"点击隐藏",isShow:true},methods:{hideOrShow:function(){if(this.isShow) {this.msg="点击显示";}else {this.msg="点击隐藏";}this.isShow = !this.isShow;}}});
</script>
</body>
</html>

分别给两个p标签添加v-show和v-if属性，值为相同的isShow，按钮的value属性通过v-bind绑定值msg，点击按钮，两个p标签隐藏，按钮显示“点击显示”，再点击按钮，两个p标签显示，按钮显示“点击隐藏”。

vue中v-show v-if v-bind的使用相关推荐

Vue中常用的8种v指令
Vue中常用的8种v指令根据官网的介绍,指令是带有 v- 前缀的特殊属性.通过指令来操作DOM元素指令功能 v-text="变量/表达式" 文本的设置字符串变量+数字可以 ...
vue v html安全,vue 中控制v-html 中的样式，但不影响全局的小技巧
我们知道在 Vue 中,style可以用两种方式来导入: // method1 @import ('./a.css'); //method2 复制代码但是不管哪一种,导进的css文件都是应用于全局的 ...
perl脚本中的特殊字符也与V字符串
#特殊字符以下我们将演示 Perl 中特殊字符的应用,如 FILE, LINE, 和 PACKAGE 分别表示当前执行脚本的文件名,行号,包名. 注意: __ 是两条下划线,FILE 前后各两条下划 ...
4.6设计一个算法判断图G中从顶点u到v是否存在简单路径
1. 题目描述假设图G采用邻接表存储,设计一个算法判断图G中从顶点u到v是否存在简单路径所谓简单路径是指路径上的顶点不重复.可采用深度优先遍历的方法 #include <bits/stdc+ ...
T a(v);和T a = v;的区别
本文所说的类型T均指UDT,非built-in类型构造一个对象,有如下三种形式: 1.T a; 这个没什么好说的,调用default ctor来构造a 不过要注意的是,要么T就一个ctor也没有,编 ...
金山发布毒霸V及网镖V新品坚持高定价策略 (转)
金山发布毒霸V及网镖V新品坚持高定价策略 (转)[@more@] 6月3日晚,瑞星突然宣布,给用户和经销商让利2200万,并将单机版产品建议零售价调低30元,零售价格降至138元.同夜,江民宣布, ...
金山发布毒霸V及网镖V新品坚持高定价策略
6月3日晚,瑞星突然宣布,给用户和经销商让利2200万,并将单机版产品建议零售价调低30元,零售价格降至138元.同夜,江民宣布,将以38元的超低价位推出一款杀毒软件-KV江民杀毒王DOS杀毒伴侣.已 ...
matlab 算 cramer s v,基于Cramer’s V指数的遥感影像特征选择方法专利_专利查询 - 天眼查...
1.基于Cramer' S V指数的高分辨遥感影像特征选择方法,其特征在于:包括以下步骤: 步骤1 :对获取的遥感影像进行预处理以及影像特征提取: 步骤2 :基于Cramer' s V关联指数的连续 ...
v+=e不等于v=v+e
当v有副作用时,其实v+=e不等于v=v+e 计算v+=e只会求一次v的值,而计算v=v+e则会求两次v的值.在后一种情况下,对v求值可能引起的任何副作用也都会出现两次. a[i++] += 2; ...
1.JAVA猜数字游戏：一个类A有两个成员变量v、num，v有一个初值100。定义一个方法guess，对A类的成员变量v，用num进行猜。 *如果num比v大则提示大了，反之则提示小了.
思路: * 1.创建一个类,定义两个成员变量v和num,v是固定值所以直接赋值,num是键盘录入的. * 2.定义一个setNum类,将来通过对象调用将键盘录入接收的数据进行设置 * 3.创建一 ...

vue中v-show v-if v-bind的使用

vue中v-show v-if v-bind的使用相关推荐

最新文章

热门文章