Vue基础-2_vue computed 返回数组

Vue基础-2

1.表单修饰符

• .number 转换为数值**(表单中输入的值为字符串类型，number可将其转换为数字类型)**
• .trim 自动过滤用户输入的首尾空白字符，只能去掉首尾的 不能去除中间的空格
• .lazy 将input事件切换成change事件（在表单校验时使用）
• 在失去焦点 或者 按下回车键时才更新

<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">

<!--自动过滤用户输入的首尾空白字符   -->
<input v-model.trim="msg">

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
1
2
3
4
5
6
7
8

2.计算属性 computed

• 模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁
• 计算属性是基于它们的响应式依赖进行缓存的
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

<div id="app">
     <!--  
        当多次调用 reverseString  的时候 
        只要里面的 num 值不改变 他会把第一次计算的结果直接返回
		直到data 中的num值改变 计算属性才会重新发生计算
     -->
    <div>{
  {reverseString}}</div>
    <div>{
  {reverseString}}</div>
     <!-- 调用methods中的方法的时候  他每次会重新调用 -->
    <div>{
  {reverseMessage()}}</div>
    <div>{
  {reverseMessage()}}</div>
  </div>
  <script type="text/javascript">
    /*
      计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Nihao',
        num: 100
      },
      methods: {
        reverseMessage: function(){
          console.log('methods')
          return this.msg.split('').reverse().join('');
        }
      },
      //computed  属性 定义 和 data 已经 methods 平级 
      computed: {
        //  reverseString   这个是我们自己定义的名字 
        reverseStrin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35