Vue2，v-if,v-show的区别，以及computed，watch,methods的区别与使用（含小练习）
v-if,v-show的区别，以及computed，watch,methods的区别与使用
指令的补充
关于显示的代码以及比较。
v-if,v-else,v-else-if条件渲染(决定是否将元素渲染到页面，决定是否在DOM上显示)
<body>
<div class="app">
<span v-if="isShow">Hello Vue !</span>
ddd
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:'.app',
data:{
isShow:false
}
})
</script>
</body>
v-show切换元素显示状态(更改元素的display属性,存在该节点的DOM不过不显示)
<body>
<div class="app">
<span v-show="isShow">Hello Vue !</span>
ddd
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:'.app',
data:{
isShow:false
}
})
</script>
</body>
区别：v-if 操作的是DOM元素，v-show操作的是css样式。
watch、computed的使用
-
computed 自动计算属性
- 我们先来看常规写法：
computed:{ //这里我们写一段代码，去展示compute的写法，常规的写法类似methods中的写法 total() { console.log("total函数执行了") return this.bookList.reduce((total, item)=> { total += item.price * item.num return total }, 0) } } //1.total和data里面的数据是一样的 //2.total的值依赖于逻辑里面的数据 //3.total的值在这里定义了就不可以在data和methods中定义total- 我们再来看computed的另一写法，拆分语法：
computed :{
//这里我们写一段代码，去展示compute的另一种写法，这叫拆分语法，注意格式，我们这里是对象的形式。同样的这里注意get()和set()
isSelectAll: {
get() {
console.log("zhixingl")
// setTimeout(()=> {
return this.bookList.every((item)=> {
return item.isChecked === true
})
// })
},
set(newValue) {
console.log("修改了isSelectAll", newValue)
this.bookList.forEach(item => {
item.isChecked = newValue
});
}
}
}
注意：computed有一个缺点：computed中不支持异步代码，像是定时器等异步代码不会执行。
-
watch 自动监听data中的属性
-
我们先来看常规写法：
-
watch: { // 这个值必须已经在data中定义了,isSelectAll必须在VUe实例的data中定义 isSelectAll(newValue, oldValue){ //这里有新老数据的两个参数 this.bookList.forEach(item => { item.isChecked = newValue }); } } -
我们再来看watch的另一写法，拆分语法，这就涉及到了三个属性
handler：里面写常规的写法内容，写入需要执行的监听操作。immediate：使用watch时有一个特点，就是当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。deep：当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听。
代码如下：
watch: { myinput:{ handler(newValue) { if(newValue === "") return this.templist = []; this.templist = this.jinmajiang.list.filter((item)=> { return item.indexOf(newValue) > -1 }) }, // 立即执行 immediate: true， deep:true } }
-
总结：methods,computed,watch的区别和适用的场景：
methods：书写的方法需要手动去调用，似乎比较笨重，但是很万能。computed：自动变化，常用于一个数据受多个数据影响。watch：自动变化，常用于一个数据影响多个数据。- 这三种配合使用去完善你的程序。
案例：购物车的复选框
- 要求：使用计算和监听属性去对购物车案例进行优化，使得有每一个商品拥有复选框，并且有一个全选框。
- 思路：我们尝试不去使用methods求和采用计算属性，另外使用监听属性去监听每一个按钮。
- 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
<form style="width: 500px;margin:0 auto">
书名:<input type="text" v-model="book.name"> <br>
价格:<input type="text" v-model="book.price"> <br>
<button type="button" class="btn btn-default" @click.prevent="addBook">添加</button>
</form>
<table class="table table-bordered" style="width: 800px;margin:50px auto;">
<thead>
<tr>
<th>
<span style="margin-right: 5px;">全选</span><input type="checkbox" v-model="checkall"
@click="changeAll">
</th>
<th>
id
</th>
<th>
书名
</th>
<th>
价格
</th>
<th>数量</th>
<th>
操作
</th>
</tr>
</thead>
<tbody>
<tr v-for="(book, index) in bookList">
<td><input type="checkbox" v-model="book.isChecked"></td>
<td>{{book.id}}</td>
<td>{{book.name}}</td>
<td>{{book.price}}</td>
<td>
<input type="number" v-model.number="book.num">
</td>
<td>
<button class="btn btn-danger" @click="delBook(book.id)">删除</button>
</td>
</tr>
<tr>
<td colspan="5">
总价: {{total}}
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
//computed
computed: {
//计算总价
total() {
return this.bookList.filter(item => {return item.isChecked === true;}).reduce((total, item) => {
total += item.price * item.num
return total
}, 0).toFixed(2)
},
},
//watch
watch: {
//单选按钮
bookList: {
// 处理的意思 -- handler方法是默认执行
handler() {
this.checkall = this.bookList.every((item) => {
return item.isChecked === true
})
},
// 深度监听
deep: true
},
},
//methods
methods: {
//多选按钮
changeAll() {
this.bookList.forEach(item => {
item.isChecked = !this.checkall
});
},
addBook() {
console.log("999")
this.bookList.push({
id: this.bookList.length + 1,
name: this.book.name,
price: this.book.price,
num: 1
})
},
delBook(id) {
this.bookList = this.bookList.filter(item => item.id !== id)
}
},
data: {
book: {
},
bookList: [
{
isChecked: false,
id: 1,
name: 'Javascript 权威指南',
price: 20,
num: 1
},
{
isChecked: false,
id: 2,
name: 'Javascript 从入门到放弃',
price: 29.99,
num: 1
},
{
isChecked: false,
id: 3,
name: 'Vue 从入门到放弃',
price: 28,
num: 1
},
{
isChecked: false,
id: 4,
name: 'uniapp 从入门到放弃',
price: 24,
num: 1
}
],
checkall: false
}
})
</script>
</body>
</html>
效果图如下：
