条件渲染
<!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>
原文地址：https://www.cnblogs.com/it-taosir/p/9887112.html
时间： 2024-11-18 20:02:32