<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<!--
案例 -两个输入框一个span标签，当输入框输入值后，需要将两个框的值用 “ - ” 连接到一起展示到span中
·为什么要用这样的方法？用插值表达式可以达到这个效果，但是插值表达式里面不建议写太多逻辑，太长违反了vue的声明式的规范
·用vue的methods也可以完成，在里面定义方法，然后插值表达式用方法名（），即可拿到方法的返回值展示，但每次加载都会调用一次该方法，效率太低
vue中的计算属性，vue中的属性指的是data里面的数据，计算属性意思就是计算data里面的数据，对data数据做一些操作然后展示
1.定义：要用的属性不存在。要通过已经有的属性计算得来。
2.备注：计算属性最终会出现在vm上，直接读取使用即可（不要在插值表达式里面加小括号（））。
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变，才会触动get方法从而改变计算属性
-->
<div id = "app">
姓名<input type="text" v-model="name">
age<input type="text" value="" v-model="age">
<span>{{fun}}</span><!--插值表达式里面写计算属性里面定义的方法，展示的是get里面的返回值，这里不能加小括号（） -->
</div>
<script>
var vm = new Vue({
el: "#app",
data :{
name: "张三",
age: "18"
},
computed:{//计算属性 传入配置对象
fun:{//定义方法，需要执行这个方法具体逻辑
get(){//写get方法，当容器里用到了上面的fun时，模板解析时就会执行这个get函数
//另外，这个get方法还有一个细节，如果多个地方用了fun，并不会多次调用这个get方法，因为vue有缓存，当多次用fun时，会去缓存读取，但当所依赖的数据发生变化时，也会再次调用
return this.name + "-" + this.age;//执行具体的逻辑，并返回，当模板解析到fun函数时，就会将返回值展示到页面上（this表示vm实例对象）
},
set(val){//与get相对应的还有set方法，当fun被修改使用时，就会执行set方法
let splice = val.split("-");//将修改的值根据字符裁切成数组
this.name = splice[0];//将裁切的第一个字符串赋值给vm实例对象的name属性
this.age = splice[1];//将裁切的第二个字符串赋值给vm实例对象的name属性
//这样操作就完成了整个系列的变化。
//当依赖的data属性发生变化时，会调用get方法，我们可以在get方法中编写逻辑代码，将自己需要计算的属性展示在页面中
//当fun被修改时，如vm.fun = “***” 它被执行时会调用set方法，我们可以在set方法中编写自己的逻辑
//比如上面代码，将修改时传入的参数切割并赋值给vm的data属性，并会引发页面用到这些属性的地方出发更新数据
}
}
}
})
</script>
</body>
</html>
浙公网安备 33010602011771号