vue-基础3——计算属性
计算属性
复杂逻辑,模板难以维护
(1) 基础例子
<body>
<div id="box">
{{myname.substring(0,1).toUpperCase() + myname.substring(1)}}
<p>计算属性：{{getName}}</p>
<p>计算属性：{{getName}}</p>
<p>方法：{{getNameMethod()}}</p>
<p>方法：{{getNameMethod()}}</p>
<p>{{getMyResult}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
myname:"kerwin"
},
methods: {
getNameMethod(){
console.log("getNameMethod")
return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
}
},
computed: {
getName(){
// 8*******
console.log("getName-computed",this)
return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
},
//完整写法
getMyResult:{
get(){
return "1111111"
},
set(newvalue){
//接受新的值
console.log("接受计算属性传来的值",newvalue)
}
}
},
})
/*
data: 状态
computed :
1. 逻辑计算，防止模板过重
2. 监听：依赖修改 ，get方法必须 return
watch: 监听，观察
不用return 调用
*/
</script>
</body>
(2) 计算缓存 VS methods
-计算属性是基于它们的依赖进行缓存的。
-计算属性只有在它的相关依赖发生改变时才会重新求值
用计算属性制作一个购物车的全选按钮例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
全选：<input type="checkbox" v-model="isAllComputedChecked"/>
<ul>
<li v-for="(data,index) in list" :key="data.id" style="overflow: hidden;">
<input type="checkbox" :value="data" v-model="checkgroup" style="float: left;"
/>
<div style="float: left;">
<div>{{data.name}}</div>
<div>价格:{{data.price}}</div>
</div>
<div style="float: left;margin-left: 20px;">
<button @click="handleDel(data)">-</button>
{{data.number}}
<button @click="data.number++">+</button>
</div>
<div style="float: right;">
<button @click="handleRemve(index,data.id)">remove</button>
</div>
</li>
</ul>
<p>checkgroup勾选：{{checkgroup}}</p>
<p>list：{{list}}</p>
<p>总金额:{{ computedSum }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
name:"kerwin",
checkgroup:[],
isAllChecked:false,
list:[
{
name:"商品1",
price:10,
number:1,
id:"1",
},
{
name:"商品2",
price:20,
number:2,
id:"2",
},
{
name:"商品3",
price:30,
number:3,
id:"3",
}
]
},
methods: {
//删除的方法
handleRemve(index,id){
console.log(index)
//删除时list
this.list.splice(index,1)
//删除checkgroup
// this.checkgroup.splice(index,1)
this.checkgroup = this.checkgroup.filter(item=>item.id!=id)
},
//商品减少
handleDel(data){
data.number--
if(data.number===0){
data.number =1
}
},
},
computed: {
//计算总金额
computedSum(){
var sum = 0;
for(var i in this.checkgroup){
sum += this.checkgroup[i].price*this.checkgroup[i].number
}
return sum
// return "1111"
},
isAllComputedChecked:{
get(){
var mychecked
if(this.checkgroup.length===this.list.length && this.list.length!==0){
//全选chekcbox勾上
mychecked = true
}else{
// 取消checkbox勾选
mychecked = false
}
return mychecked
},
set(checked){
console.log(checked)
if(checked){
this.checkgroup = this.list
}else{
this.checkgroup = []
}
}
}
}
})
</script>
</body>
</html>
(3) data vs computed vs watch
Mixins
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。
混入对象可以包含任意组件选项。
当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
https://cn.vuejs.org/v2/guide/mixins.html#%E5%9F%BA%E7%A1%80
<body>
<div id="box">
<button @click="handleGet()">
ajax-get
</button>
<button @click="handlePost()">
ajax-post
</button>
{{getA}}
</div>
<script type="text/javascript">
//mixin 公共方法引入，
var http = {
methods:{
handleGet(){
// new
console.log("ajax.get()....,业务逻辑")
//ajax.get()....
},
handlePost(){
console.log("ajax.post()....，业务逻辑")
//ajax.get()....
}
},
computed: {
getA(){
return "aaaaaaaaa";
}
},
}
new Vue({
el:"#box",
mixins:[http],
data:{
},
methods: {
//只做视图逻辑
handleGet(){
// new
console.log("ajax.get()....,业务逻辑------vue实例定义")
//ajax.get()....
},
},
})
</script>
</body>
