计算属性 computed

复杂 data 的处理方式

在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。
案例一：我们有两个变量：firstName和lastName，希望它们拼接之后在界面上显示；
案例二：我们有一个分数：score

• 当score大于60的时候，在界面上显示及格；
• 当score小于60的时候，在界面上显示不及格；

案例三：我们有一个变量message，记录一段文字：比如Hello World

• 某些情况下我们是直接显示这段文字；
• 某些情况下我们需要对这段文字进行反转；

对于这种复杂 data 数据处理，有三种方式：

1. 在模板语法中直接使用表达式
2. 使用 method 对逻辑进行抽取
3. 计算属性

   模板语法

   ```html

```javascript
Vue.createApp({
  template: '#templ',
  data() {
    return {
      books: [
        {
          id: 1,
          name: '《算法导论》',
          date: '2006-9',
          price: 80.0,
          count: 1
        },
        {
          id: 2,
          name: '《UNIX编程艺术》',
          date: '2006-2',
          price: 59.0,
          count: 1
        },
        {
          id: 3,
          name: '《编程珠玑》',
          date: '2008-10',
          price: 39.0,
          count: 1
        },
        {
          id: 4,
          name: '《代码大全》',
          date: '2006-3',
          price: 128.0,
          count: 1
        }
      ],
      showFlag: true
    }
  },
  methods: {
    reduce(index) {
      // if(this.books[index].count > 1)  this.books[index].count--
      this.books[index].count--
    },
    add(index) {
      this.books[index].count++
    },
    removeBook(id) {
      this.books = this.books.filter(item => {
        return item.id != id
      })
    }
  },
  computed: {
    totalPrice() {
      let result = 0
      if (this.books.length == 0) return 0
      for (const book of this.books) {
        result += book.count * book.price
      }
      return result
    }
  },
  watch: {
    'books.length': function () {
      this.books.length <= 0 ? (this.showFlag = false) : (this.showFlag = true)
    }
  }
}).mount('#app')

其中对数据的格式化，比如价格前面加上人民币符号。在 vue2 中可以利用过滤器，但是 vue3 中删除了过滤器，推荐使用计算属性和全局方法来代替过滤器的功能。

// Vue3不支持过滤器了, 推荐两种做法: 使用计算属性/使用全局的方法
filterBooks() {
  return this.books.map(item => {
    const newItem = Object.assign({}, item);
    newItem.price = "¥" + item.price;
    return newItem;
  })
}

表单指令：v-model

表单提交是开发中非常常见的功能，也是和用户交互的重要手段：

• 比如用户在登录、注册时需要提交账号密码；
• 比如用户在检索、创建、更新信息时，需要提交一些数据；

这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用 v-model 指令来完成：

• v-model 指令可以在表单 input、textarea 以及 select 元素上创建双向数据绑定；
• 它会根据控件类型自动选取正确的事件来获取表单输入；
  • v-bind 是从数据源到模板，v-model 通过控件类型对应的事件回调函数，在响应函数中通过事件对象 event 来获取输入内容，从而实现了数据从模板到 data

所以 v-model 本质上不过是 v-bind 和 v-on 的语法糖

v-model 是语法糖

比如：input 输入框，类型 type 为 text，在输入框中输入的内容保存在 value 属性中。v-model 实现了 v-bind 绑定value 属性，并且监听了 input 事件，通过事件对象获取了输入内容。

<template id="templ">
  <input type="text" :value="val" @input="setVal($event)">
  <h2>上面输入框的值：{{val}}</h2>
  <button @click="change">修改输入框的值</button>
</template>

<script>
  Vue.createApp({
    template: "#templ",
    data() {
      return {
        val: null
      }
    },
    methods: {
      // 模板输入，data 获取到输入的值
      setVal(event) {
        console.log(event);
        this.val = event.target.value
      },
      // data 改变，模板数据也改变
      change() {
        this.val += 1
      }
    },
  }).mount("#app")
</script>

上面的实现和下面的实现，效果是一样的。

<template id="templ">
  <input type="text" v-model="inputValue">
  <h2>上面输入框的值：{{inputValue}}</h2>
</template>

<script>
  Vue.createApp({
    template: "#templ",
    data() {
      return {
        val: null,
        inputValue: null
      }
    }
  }).mount("#app")
</script>

但是 v-model 实际上肯定比单纯的 v-bind 和 v-on 更复杂，因为 v-model 最大的特点是实现了针对不同类型的表单控件，自动绑定对应的属性和事件。
比如：

• text 和 textarea 元素绑定value 和 input 事件；
• checkbox 和 radio 元素绑定checked 和 change 事件；
• select 元素绑定 value 并将 change 作为事件。

v-model 绑定单、多选框

注意下 v-model 绑定多选框，我们知道多选框获取“输入”的是 chenked 属性，“输入”也是个布尔值，显然我们获取布尔值是没有多大意义的，我们想要的是选中这个选项的真实含义。
此时就可以手动添加一个 value 属性，value 属性中写上这个选项代表的含义。而 v-model 会优先将 value 属性的值传递到 data 中。

<template id="templ">
  <span>你的爱好: </span>
  <label for="basketball">
    <!-- 显示地写出 value 属性 -->
    <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>
  <!-- 将会把 value 值传入 hobbies，而不是一个一个选中标记 -->
  <h2>hobbies: {{hobbies}}</h2>
</template>

<script>
  Vue.createApp({
    template: "#templ",
    data() {
      return {
        hobbies: []
      }
    }
  }).mount("#app")
</script>

v-model 的值绑定

目前我们在前面的案例中大部分的值都是在template中固定好的：

• 比如gender的两个输入框值male、female；
• 比如hobbies的三个输入框值basketball、football、tennis；

在真实开发中，我们的数据可能是来自服务器的，那么我们就可以先将值请求下来，绑定到data返回的对象中，
再通过 v-bind 来进行值的绑定，这个过程就是值绑定。

v-model 修饰符

lazy

lazy修饰符是什么作用呢？
默认情况下，v-model 在进行双向绑定时，绑定的是input事件，那么会在每次内容输入后就将最新的值和绑定
的属性进行实时同步；
如果我们在 v-model 后跟上lazy修饰符，那么会将绑定的事件切换为 change 事件，只有在提交时（比如回车）
才会触发，这样就不会实时绑定，只有手动触发事件后才绑定；

<input type="text" v-model.lazy="message">
<h2>{{ message }}</h2>

number

v-model 有个特点，会将所有获取到的输入值，都以字符串的形式传入 data。
比如输入数字，其实在 data 中是一个数字字符串，虽然不影响逻辑判断，因为逻辑判断会有隐式转换，但是如果想要以 number 类型保存到 data 中，可以加个 number 修饰符。

<template id="templ">
  <input type="text" v-model="inputVal1" placeholder="输入 123">
  <input type="text" v-model.number="inputVal2" placeholder="输入 123">
</template>

<script>
  Vue.createApp({
    template: "#templ",
    data() {
      return {
        inputVal1: null,
        inputVal2: null
      }
    },
    watch: {
      inputVal1() {
        console.log(typeof this.inputVal1); // string
      },
      inputVal2() {
        console.log(typeof this.inputVal2); // number
      }
    }
  }).mount("#app")
</script>

trim

如果要自动过滤用户输入的首尾空白字符，可以给v-model添加 trim 修饰符

v-model 组件上使用