vue条件渲染v-if/v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>p28:vue条件渲染</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="demo">
<!--性能上来讲，如果数据不经常变化用v-show比较好，v-if会反复渲染，但实时性更高-->
<div v-show="false">节点还在只是不显示了，相当于display:none</div>
<div v-if="i===1">如果条件不成立不显示，且节点也不存在</div>
<button @click="incr">i++</button>
<p v-if="i===1">1</p>
<p v-else-if="i===2">2</p>
<p v-else>其它</p>
<template v-if="i==4">
i==4时可以看到,template只能用v-if不能用v-show
</template>
</div>
<script type="text/javascript">
//创建vue实例
const vm = new Vue({
el: "#demo",
data: {
i: 0,
},
methods: {
incr() {
this.i = this.i+1
console.log(this.i)
}
},
//computed中定义计算属性，计算属性会有缓存，模板中多次调用get时只会计算一次，效果更高，如果用methods则每次都会调用
computed: {},
watch: {},
})
</script>
</body>
</html>赞:(0)
踩:(0)
- 相关文章
- 初识vue
- 数据绑定：第一个vue例子
- vue模板语法
- vue数据绑定
- el与data的两种写法/延迟挂载
- vue数据代理-Object.definePropert
- vue事件及事件修饰符prevent/stop/
- vue计算属性computed
- vue(深度)监视属性watch
- vue绑定样式:class,:style
- 热门文章
- win7中将文件拷贝到虚拟机linux下
- phpexcel设置行高及列宽,背景颜色,
- rabbitmq无法启动
- intellij idea不显示git push按钮
- php7中使用mongodb的aggregate进行
- laravel页面静态化的方法
- centos7.4 64位下swoole安装及配置
- navicate连接mycat报1184错误
- curl设置超时不起作用(CURLOPT_TIM
- devops-jenkins容器为pending状态
- 好评文章
- phpexcel设置行高及列宽,背景颜色,
- php7中使用mongodb的aggregate进行
- intellij idea打开文件所在文件夹
- windows下使用MongoDB Compass Com
- win7中将文件拷贝到虚拟机linux下
- laravel 中悲观锁 & 乐观锁的使用
- 单点登录sso原理及php实现方式及de
- navicate连接mycat报1184错误
- rabbitmq无法启动
- laravel整合dingo/api方法步骤:jwt
- 我的项目
- 【github】www.github.com/hurong241
- 【码云】gitee.com/hu_rong/projects
- 【docker hub】hub.docker.com/repositories/hurong241
- 【packagist】packagist.org/users/hurong241/packages
- 站点信息
- 建站时间：2011年
- 文章数：623篇
- 浏览数：1303109
