16 vue之计算属性
1 计算属性computed
复杂逻辑,模板难以维护
(1) 基础例子
(2) 计算缓存 VS methods-计算属性是基于它们的依赖进行缓存的。-计算属性只有在它的相关依赖发生改变时才会重新求值
(3) 计算属性 VS watch
- v-model32 通过计算属性实现名字首字母大写
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
<body>
<div id="box">
<input type="text" v-model="msg">{{msg.substring(0,1).toUpperCase()+msg.substring(1)}}
<p>计算属性：{{getUpper}}p>
<p>普通方法：{{upperMethod()}}p>
div>
body>
<script>
let vm = new Vue({
el: '#box',
data: {
msg: '',
},
computed:{
getUpper(){//依赖的状态改变了，会重新计算
console.log('计算属性')
return this.msg.substring(0,1).toUpperCase()+this.msg.substring(1)
}
},
methods:{
upperMethod(){
console.log('普通方法')
return this.msg.substring(0,1).toUpperCase()+this.msg.substring(1)
}
}
})
script>
html>
3 计算属性和普通方法的区别
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
<body>
<div id="box">
<input type="text" v-model="msg">{{msg.substring(0,1).toUpperCase()+msg.substring(1)}}
<p>计算属性1：{{getUpper}}p>
<p>计算属性2：{{getUpper}}p>
<p>普通方法1：{{upperMethod()}}p>
<p>普通方法2：{{upperMethod()}}p>
div>
body>
<script>
let vm = new Vue({
el: '#box',
data: {
msg: '',
},
computed:{
getUpper(){//依赖的状态改变了，会重新计算
console.log('计算属性')
return this.msg.substring(0,1).toUpperCase()+this.msg.substring(1)
}
},
methods:{
upperMethod(){
console.log('普通方法')
return this.msg.substring(0,1).toUpperCase()+this.msg.substring(1)
}
}
})
script>
html>
4.计算属性重写过滤案列
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="./js/vue.js">script>
head>
<body>
<div class="app">
<input type="text" v-model="myText">
<br>
<ul>
<li v-for="data in newdataList">{{data}}li>
ul>
div>
body>
<script>
var vm = new Vue({
el: '.app',
data: {
myText:'',
dataList:['a','abc','abandon','c','curd','d','dog','doc']
},
computed:{
newdataList(){
return this.dataList.filter(item=>{
return item.indexOf(this.myText)>-1
})
}
}
})
script>
html>