Vue指令之`v-if`和`v-show`
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
<body>
<div class="box">
<!-- v-if 等于true的时候 会把这个元素彻底移除掉-->
<h1 v-if="flog">这里显示的是v-if绑定的数据</h1>
<!-- v-show 等于true的时候，会把这个元素设置成display：none-->
<h1 v-show="flog">这里显示的是v-show绑定的数据</h1>
<input type="button" value="切换按钮" @click ="btnClick">
</div> <script src="lib/vue-2.4.0.js"></script>
<script>
var vm=new Vue({
el:'.box',
data:{
flog:true
},
methods:{
btnClick:function(){
this.flog=!this.flog
}
}
});
</script>
经典案例 购入车选项 使用v-if 和v-else 或者 v-else if
<div class="box">
<button @click="handleClick()">Click</button>
<div v-if="isCheck">空空如也</div>
<ul v-else>
<li v-for="item in gouru" >{{item}}</li>
</ul>
</div> <script src="vue-2.4.0.js"></script>
<script>
var vm= new Vue({
el:'.box',
data:{
isCheck:true,
gouru:['11111','22222','33333']
},
methods: {
handleClick:function () {
this.isCheck=! this.isCheck
},
},
})
</script>
</body>
</html>
Vue指令之`v-if`和`v-show`的更多相关文章
- vue的使用与安装 npm -v报错
1.先将node从官方文档下载下来,然后进行安装. 安装成功后,在dos命令中node -v.npm -v来测试,如果成功就可以安装cnpm(国内淘宝镜像比较快).这里我遇到一个bug,npm -v压 ...
- Vue框架（二）——Vue指令（v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令）、todolist案例、Vue实例（计算、监听）、组件、组件数据交互
Vue指令 1.v-once指令 单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...
- [Vue] : Vue指令
Vue指令之 v-cloak v-cloak是解决解决插值表达式的闪烁问题 . 给插值表达式的元素加上v-cloak <p v-cloak>{{ msg }}</p> 为v-c ...
- Vue学习笔记【7】——Vue指令之v-model和双向数据绑定
v-model是唯一可以实现双向数据绑定的vue指令 单向数据绑定:修改内存中的数据,页面上同步更改.v-bind <!-- v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法 ...
- 第三篇：Vue指令
Vue指令 1.文本指令相关 v-*是Vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义) v-text是原样输出渲染内容,渲染控制的 ...
- 02 Vue指令
Vue指令 1.文本相关指令 <div id="app"> <!-- 插值表达式 --> <p>{{ msg }}</p> < ...
- Vue --- 指令练习
scores = [ { name: 'Bob', math: 97, chinese: 89, english: 67 }, { name: 'Tom', math: 67, chinese: 52 ...
- Oracle基本数据字典:v$database、v$instance、v$version、dba_objects
v$database: 视图结构: SQL> desc v$database; Name Null? Type - ...
- POJ2762 Going from u to v or from v to u(单连通 缩点)
判断图是否单连通,先用强连通分图处理,再拓扑排序,需注意: 符合要求的不一定是链拓扑排序列结果唯一,即在队列中的元素始终只有一个 #include<cstdio> #include< ...
- Going from u to v or from v to u?_POJ2762强连通+并查集缩点+拓扑排序
Going from u to v or from v to u? Time Limit: 2000MS Memory Limit: 65536K Description I ...
随机推荐
- Flink 自定义source和sink，获取kafka的key，输出指定key
--------20190905更新------- 沙雕了,可以用 JSONKeyValueDeserializationSchema,接收ObjectNode的数据,如果有key,会放在Objec ...
- 【计算机视觉】OpenCV篇(9) - 轮廓（寻找/绘制轮廓）
什么是轮廓? 轮廓是一系列相连的点组成的曲线,代表了物体的基本外形. 轮廓与边缘好像挺像的? 是的,确实挺像,那么区别是什么呢?简而言之,轮廓是连续的,而边缘并不全都连续(见下图示例).其实边缘主要是 ...
- Java连接MongoDB报错“java.lang.IllegalArgumentException: clusterListener can not be null”的解决办法
我使用的MongoDB版本是3.6.9. 下面是一个很基础的示例代码,功能就是连接MongoDB: package com.zifeiy.snowflake.handle.etl.mongodb; i ...
- 【git基础】Permission denied (publickey). fatal: Could not read from remote repository
运行以下git命令的时候出现错误 git push -u origin master error The authenticity of host 'github.com (13.250.177.22 ...
- 【Leetcode_easy】961. N-Repeated Element in Size 2N Array
problem 961. N-Repeated Element in Size 2N Array solution: class Solution { public: int repeatedNTim ...
- consul服务注册与服务发现的巨坑
最近使用consul作为项目的服务注册与服务发现的基础功能.在塔建集群使用中遇到一些坑,下面一个个的记录下来. consul集群多node consul集群的node也就是我们所说的consul实例. ...
- tomcat 启动闪退解决方法
当我们在windows上面进行项目的部署与启动的时候有的时候tomcat在进行启动的时候会删一下就退了,这个时候一般是里面启动的时候设置的jdk的问题下面咱们来看一下具体解决方案 编辑我们的start ...
- C++ 顺序容器(vector，list、deque,stack,queue)
顺序容器的种类有:vector,list.deque 顺序容器适配器: stack //先进后出 栈 queue //先进先出 队列 priority_queue //也优先管 ...
- Appium移动自动化测试-----（六）2.AppiumDesktop录制脚本生成极简脚本
AppiumDesktop启动页面: 启动AppiumDesktop以后点击该页面右上角的Start New Session按钮,就会启动一个新的会话窗口(如下图),在这个窗口我们需要配置一些Desi ...
- QT中PRO文件解析（转）
From csdn blog: QT中PRO文件写法的详细介绍,很有用,很重要! 在QT中,有一个工具qmake可以生成一个makefile文件,它是由.pro文件生成而来的,.pro文件的写法如下: ...