前言
在实际开发中，我们会遇到一些情况，比如我们可能需要对数据进行一些转化后再显示，或将多个数据结合起来进行显示；如果把这些逻辑直接写在template中，这样就会使得UI里放逻辑，就违背了vue设计的愿景, 这个时候compute计算属性就产生了
一、computed 计算属性
对于任何响应式数据的复杂逻辑，都应该放在使用computed
计算属性将被混入到组件实例中。所有getter和setter的上下文自动绑定为组件实例
data() { return { firstName: "Kobe", lastName: "Bryant", score: 80, message: "Hello World" } }, computed: { // 定义了一个计算属性叫fullname fullName() { return this.firstName + " " + this.lastName; }, result() { return this.score >= 60 ? "及格": "不及格"; }, reverseMessage() { return this.message.split(" ").reverse().join(" "); } }
二、watch 监听器
监听器watch的配置选项：
1.watch只是在侦听info的引用变化，对于内部属性的变化说不会做出相应的，我们可以使用选项deep进行更深层的侦听；
2.另外一个属性，是希望一开始就会立即执行一次：
3.
1.这个时候我们使用immediate选项
2. 这个时候无论后面的数据是否有变化，侦听的函数都会有限执行一次；
watch: { // 默认情况下我们的侦听器只会针对监听的数据本身的改变(内部发生的改变是不能侦听) // info(newInfo, oldInfo) { // console.log("newValue:", newInfo, "oldValue:", oldInfo); // } // 深度侦听/立即执行(一定会执行一次) info: { handler: function(newInfo, oldInfo) { console.log("newValue:", newInfo.nba.name, "oldValue:", oldInfo.nba.name); }, deep: true, // 深度侦听 // immediate: true // 立即执行 }, //也可以监听info的属性 'info.name': function(){ console.log(this.info.name, 'info.name'); } },
三、v-model的用法
1.v-model指令可以在表单 input，textarea以及select元素上创建双向数据绑定，
2.它会根据控件类型自动选择正确的方法来更新元素
3.v-model本质上是语法糖，它负责监听用户的输入事件来更新数据，并在极端场景下进行一些特殊处理；
v-model的原理 ：两个操作
- v-bind绑定value属性的值；
- v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中
//绑定textarea article是一个字符串 <textarea v-model="article"> </textarea> //绑定checkbox -单个勾选框 isAgree是一个布尔值 <input id='agreement' type="checkbox" v-model="isAgree" /> //绑定checkbox -多个复选框 hobbies是一个数组 <label for="basketball"> <input id="basketball" type="checkbox" v-model="hobbies" value="basketball"> 篮球 </label> <label for="football"> <input id="football" type="checkbox" v-model="hobbies" value="football"> 足球 </label> <label for="tennis"> <input id="tennis" type="checkbox" v-model="hobbies" value="tennis"> 网球 </label> //radio gender是一个字符串 是input的value <label for="male"> <input id="male" type="radio" v-model="gender" value="male">男 </label> <label for="female"> <input id="female" type="radio" v-model="gender" value="female">女 </label> // 绑定select fruit是一个字符串的时候就是单选，如果是一个数组就是多选 <select v-model="fruit" multiple size="2"> <option value="apple">苹果</option> <option value="orange">橘子</option> <option value="banana">香蕉</option> </select>
