Vue 基础笔记 03

---

表单控件绑定

1. 多行文本输入框 textarea

// html 代码
<div id="box">
  <div>
   {{ textArea }}
  </div>
  <textarea v-model="textArea"></textarea>
</div>

// js 代码
<script>
new Vue({
  el: '#box',
  data:{
    textArea:''
  }
})
</script>

2. 复选框 type="checkbox"

// html 代码
<div id="box">
  <div>
   {{ checkbox }} // true 为选中，false 为未选中
  </div>
  <input v-model="checkbox"></input>
</div>

// js 代码
<script>
new Vue({
  el: '#box',
  data:{
    checkbox:'', // 复选框的类型是布尔值
  }
})
</script>

3. 多选框 type="checkbox" 配合 value 使用

// html 代码
<div id="box">
  <div>
   {{ checkboxs }} // 选中的值为 value 值
  </div>
    <input type="checkbox" id="1" value="vue" v-model="checkboxs"> <label>vue</label>
    <input type="checkbox" id="2" value="react" v-model="checkboxs"> <label>react</label>
    <input type="checkbox" id="3" value="angular" v-model="checkboxs"> <label">angular</label> 
</div>

// js 代码
<script>
new Vue({
  el: '#box',
  data:{
    checkboxs:'', // 多选框的类型是数组
  }
})
</script>

4. 单选框 type="radio" 配合 value 使用

// html 代码
<div id="box">
  <div>
   {{ radio }} // 选中的值为 value 值
  </div>
    <input type="radio" id="1" value="male" v-model="radio"> <label>男</label>
    <input type="radio" id="2" value="famale" v-model="radio"> <label>女</label>
</div>

// js 代码
<script>
new Vue({
  el: '#box',
  data:{
    radio:'',
  }
})
</script>

5. 下拉选择框 select

// html 代码
<div id="box">
  <div>
   {{ select }} // 选中的值为 value 值
  </div>
    <select v-model="select">
        <option v-for="item in dataList" :key="item.id">
            {{item.option}}
        </option>
    </select>
</div>

// js 代码
<script>
new Vue({
  el: '#box',
  data:{
    select:'',
    dataList:[
        {
            id:1,
            option:"苏州",
            value:"Su Zhou"
        },{
            id:2,
            option:"上海",
            value:"Shang Hai"
        },{
            id:3,
            option:"南京",
            value:"Nan Jing"
        }
    ]
  }
})
</script>

---

表单修饰符

1、 .lazy

// 使用 lazy 修饰符，从而转变为使用 change 事件进行同步 也就是失去焦点才能获取到输入框的值
<input v-model.lazy="msg">

2、 .number

// 使用 number 修饰符，将输入值转为数值类型
<input v-model.number="age" type="number">

3、 .trim

// 使用 trim 修饰符，自动过滤输入的首尾空白字符
<input v-model.number="age" type="number">

---

计算属性 侦听属性 方法

1. 计算属性 computed

任何复杂逻辑，都应当使用计算属性。 (模板中放入太多的逻辑会让模板过重且难以维护)

// html 代码
<div id="box">
  <div>{{ Message }}</div>
  <div>{{ reversedMessage }}</div>
</div>

// js 代码
<script>
new Vue({
  el: '#box',
  data:{
    Message:'Hollo'
  },
  computed: {
      reversedMessage: function () {  
          return this.message.split('').reverse().join('') 
      } 
  }
})
</script>

2. 侦听属性 watch

// html 代码
<div id="box">
  <div>{{ Message }}</div>
</div>

// js 代码
<script>
new Vue({
  el: '#box',
  data:{
    Message:'Hollo'
  },
  watch: {
      Message: function () {  
          return this.message.split('').reverse().join('') 
      } 
  }
})
</script>

3. 方法

// html 代码
<div id="box">
  <div>{{ Message() }}</div>
</div>

// js 代码
<script>
new Vue({
  el: '#box',
  data:{
    Message:'Hollo'
  },
  methods: {
      Message() {  
          return this.message.split('').reverse().join('') 
      } 
  }
})
</script>

4. 总结三者的区别和用法

计算属性： 解决模板过重且难以维护的问题，必须有返回值(return),注重结果，有缓存，同步的

侦听属性： 监听一个值的变化，不用返回值(return),注重结果，可以同步的也可以异步

方法： 主要是事件，用于逻辑计算

---

• @Title: Vue基础学习笔记03
• @Content: Vue
• @Autor: ling.wang
• @StudyDate: 2022-02-17
• @WritingDate: 2022-02-17