VUE:条件渲染和列表渲染
2024-10-01 12:57:34
条件渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.条件渲染指令
v-if v-else 移除标签
v-show 通过样式隐藏
2.比较 v-if 与v-show
如果需要频繁切换 v-show 较好
--> <div id="app">
<p v-if="ok">成功了</p>
<p v-else>失败了</p> <p v-show="ok">表白成功了</p>
<p v-show="!ok">表白失败了</p>
<button @click="ok=!ok">切换</button>
</div> <script type="text/javascript" src="../js/vue.js" ></script>
<script>
new Vue({
el:'#app',
data:{
ok:false
}
})
</script>
</body>
</html>
列表渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1.列表显示
数组:v-for / index
对象:v-for / key
2.列表的更新显示
删除item
替换item
--> <div id="demo">
<h2>测试:v-for 遍历数组</h2>
<ul>
<!-- p:遍历的个体 index:下标-->
<li v-for="(p,index) in persons" :key="index">
{{index}}----{{p.name}}----{{p.age}}
----<button @click="deleteP(index)">删除</button>
----<button @click="updateP(index,{name:'Cat',age:20})">更新</button>
</li>
</ul>
<h2>测试:v-for 遍历对象</h2>
<ul>
<li v-for="(value,key) in persons[1]" :key="key">
{{value}}----{{key}}
</li>
</ul>
</div> <script type="text/javascript" src="../js/vue.js" ></script>
<script>
//vue本身只是监视了的改变,没有监视数组内部数据的改变
//vue重写了数组中的一系列改变数组内部数据的方法(先调用原生,更新界面)
//即vue包含一组观察数组的变异方法,所以他们也将会触发视图更新:
//push() pop() shift()
//unshift() splice() sort() reverse()
//实现思路:重写-更新
new Vue({
el:"#demo",
data:{
persons:[
{name:'Tom',age:18},
{name:'Taosir',age:22},
{name:'moer',age:20},
{name:'Bom',age:24},
]
},
methods:{
deleteP(index){
//删除persons中指定的index的p this.persons.splice(index,1);
},
updateP(index,newP){
//并没有改变persons本身,数据内部发生了变化,但并没有调用变异方法,vue不会更新
//this.persons[index]=newP; //没有指向persons本身,错!
this.persons.splice(index,1,newP);//删除一个,然后添加
}
}
})
</script>
</body>
</html>
最新文章
- 十个免费的web应用安全检测工具
- 「JavaScript」四种跨域方式详解
- List多对多的查询应用
- GPS 坐标距离计算
- Shell 操作练习2
- hadoop 中对Vlong 和 Vint的压缩方法
- drupal 7.23 上传中文命名文件bug
- scrapy-redis实现爬虫分布式爬取分析与实现
- SCSI miniport 驾驶一个简单的框架
- redhat7 Samba
- 洛谷P3159 [CQOI2012]交换棋子
- Windows上为Apache配置HTTPS
- IE7下onclick事件失效的问题
- 『MXNet』第八弹_数据处理API_下_Image IO专题
- 【oracle】oracle REGEXP_SUBSTR分割字符串
- iOS - 开源框架、项目和学习资料汇总(网络篇)
- Cordova学习
- Day1 MySql安装和基本操作
- 《JavaScript》split和join
- C语言 strftime 格式化显示日期时间 时间戳