Vue-经常使用指令(下)

• Vue数组:

updateData(){
    // 从数组末尾添加
    this.names.push('why','zs')
    // 删除并返回数组最后的一个元素
    this.names.pop()
    // 向数组的开头添加一个或更多元素，并返回新的长度
    this.names.unshift('why','zs')
    //把数组的第一个元素从其中删除，并返回第一个元素的值。
    this.names.shift()
    // 向/从数组中添加/删除项目，而后返回被删除的项目。
    this.names.splice(2)
    // 对数组的元素进行排序
    this.names.sort()
    // 用于颠倒数组中元素的顺序。
    this.names.reverse()
    // 一下没法出发vue的自动更新
    this.name[index] = 'value'
    this.names.length=length
    // 下边着中set能够让vue自动更新数组变化
    Vue.set(this.names,1,'kobe')
    filter() //建立一个新的数组，新数组中的元素是经过检查指定数组中符合条件的全部元素。
    concat() //用于链接两个或多个数组。
    slice() //可从已有的数组中返回选定的元素。
}

• v-model

该指令用来实现表单元素和数据的双向绑定

nv-model实际上是一个语法糖，它的背后本质上是包含两个操做：

1.v-bind绑定一个value属性

2.v-on指令给当前元素绑定input事件

也就是说下面的代码：等同于下面的代码：

<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

v-model和各类表单绑定案例

<div id="app">
      <!--name 属性具备互斥性, 即选择男 ,女的选项就不会被选 ,  v-model具备和name同样的互斥性,因此能够不用写name-->
      <input type="radio" v-model="sex" value="男" />男
      <input type="radio" v-model="sex" value="女" />女 
      您选择的性别是: {{sex}}

      <label for="hobbies">
        <input type="checkbox" v-model="hobbies" value="篮球" />篮球 
        <input type="checkbox" v-model="hobbies" value="乒乓球" />乒乓球
        <input type="checkbox" v-model="hobbies" value="台球" />台球
      </label>
      您选择的爱好是: {{hobbies}}

      <select v-model="fruit">
        <option value="香蕉">香蕉</option>
        <option value="苹果">苹果</option>
        <option value="橘子">橘子</option>
        <option value="菠萝">菠萝</option>
      </select>
      您选择的水果是: {{fruit}}

      <!--multiple 多选-->
      <select v-model="fruits" multiple>
        <option value="香蕉">香蕉</option>
        <option value="苹果">苹果</option>
        <option value="橘子">橘子</option>
        <option value="菠萝">菠萝</option>
      </select>

      您选择的水果是: {{fruits}}
    </div>
    <script src="vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          sex: '男',
          hobbies: [],
          fruit: '',
          fruits: '',
        },
      });
    </script>

修饰符

<!-- 懒加载
    v-model默认是在input事件中同步输入框的数据的。
    也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
    lazy修饰符能够让数据在失去焦点或者回车时才会更新
        -->
     <input type="text" v-model.lazy="message"></input>
    <!-- 默认的状况下是字符串, v-model.number只能接受数字 -->
     <input type="number" v-model.number="message"></input>
    {{typeof message}}  <!--typeof value 会输出 value的类型-->
        <!-- 去除空格 -->
    <input type="text" v-model.trim="message"></input>