vue2.0 之条件渲染
2024-10-01 11:16:27
条件渲染v-if、v-show
<template>
<div>
<a v-if="isPartA">partA</a>
<a v-show="!isPartA">partB</a>
<button v-on:click="toggle">toggle</button>
</div>
</template> <script>
export default {
data () {
return {
isPartA: true
}
},
methods: {
toggle () {
this.isPartA = !this.isPartA
}
}
}
</script> <style>
html {
height: 100%;
}
</style>
点击按钮前
点击按钮后
v-if和v-show区别：
- v-if删除
- v-show用css控制
v-if、v-else
<template>
<div>
<a v-if="isPartA">partA</a>
<a v-else>no data</a>
<button v-on:click="toggle">toggle</button>
</div>
</template> <script>
export default {
data () {
return {
isPartA: true
}
},
methods: {
toggle () {
this.isPartA = !this.isPartA
}
}
}
</script> <style>
html {
height: 100%;
}
</style>
点击按钮前
点击按钮后
最新文章
- 时隔一年再读到the star
- W3School-CSS 伪元素 (Pseudo-elements) 实例
- sql里面的分页
- IOS开发技巧快速生成二维码
- javascript设计模式实践之代理模式--图片预加载
- 【leetcode】Single Number II （medium） ★ 自己没做出来....
- qt QMetaObject::connectSlotsByName()自动关联失效问题解决
- Python函数中的参数（二）
- Java Interface是存放常量的最好地方吗？（转）
- iOS 跳转到应用所在的App Store市场
- DBCONN
- 【HDOJ】1271 整数对
- Android 常用开源代码整理
- 物联网操作系统HelloX开发人员入门指南
- Ueditor文件上传问题
- js中常用的日期总结
- VS2012 发布网站步骤
- win10连接无线网，开启移动热点，手机连接它手机一直显示获取ip地址中。
- uoj#209. 【UER #6】票数统计
- [Unity基础]RenderTexture
热门文章
- 【CV】ICCV2015_Describing Videos by Exploiting Temporal Structure
- 2-Twenty third Scrum Meeting-20151229
- how are you
- python中的文件读写（open()函数、with open('file_directory','r') as f:、read()函数等）
- HTML 5 Canvas vs. SVG
- ThinkPad E470 win10，重装win10专业版后无声音
- python中Switch/Case实现
- hive视图
- rabbitmq代码配置
- Java之JSON操作（gson）