1. v-if v-show
v-if v-else 类似js里的if else
v-show 类似js样式 display:block display:none
区别：
v-if ， v-else dom树只会显示一个
v-show 都会显示在dom里
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-if="ok"> success </p>
<p v-else> fail </p>
<p v-show="ok"> success </p>
<p v-show="!ok"> fail </p>
<button @click="ok=!ok"> 点击切换 </button>
</div>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
ok: true
},
})
</script>
</body>
</html>
2. v-for
基本用法：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in todos" :key="index">
{{ item.name }} -- {{ item.age }}---
<button @click="deleteData(index)"> 删除 </button> ---
<button @click="updateData(index, {name: 'tt', age: 22})"> 修改 </button>
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
todos: [
{name: 'dou', age: 16},
{name: 'jack', age: 17},
{name: 'tom', age: 18},
{name: 'ttl', age: 19},
{name: 'alice', age: 13},
]
},
methods:{
deleteData(index){
console.log(this.todos)
this.todos.splice(index, 1)
},
updateData(index, newData){
this.todos.splice(index, 1, newData)
}
}
})
</script>
</body>
</html>
案例：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="searchName">
<ul>
<li v-for="(item, index) in newTodos" :key="index">
{{ item.name }} -- {{ item.age }}
</li>
</ul>
<button @click="setOrder(1)"> 年龄升序 </button>
<button @click="setOrder(2)"> 年龄降序 </button>
<button @click="setOrder(0)"> 原本顺序 </button>
</div>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
searchName:'', // 通过searchName 过滤
orderType: 0, // 0代表原本顺序，1代表升序，2代表降序
todos: [
{name: 'dou', age: 16},
{name: 'jack', age: 17},
{name: 'tom', age: 18},
{name: 'ttl', age: 19},
{name: 'aloce', age: 13},
]
},
methods:{
setOrder(order){
this.orderType = order;
}
},
computed:{
// 筛选过后的数据
newTodos(){
// 获取需要的数据
const {searchName, todos, orderType} = this;
let arr = todos.filter(todo=>todo.name.indexOf(searchName) !== - 1);
arr.sort((a, b)=>{
if(orderType !== 0){
if(orderType == 1){
return a.age -b.age;
}else{
return b.age-a.age
}
}
});
return arr;
}
}
})
</script>
</body>
</html>
733
