双向绑定

前言: 高深的概念往往隐藏着一个浅显的道理,只是被专业的人用了专业的词,听起来云里雾里,尤其是自学编程同学,感触更深!

双向绑定概念

双向绑定其实就是将表单输入数据实时渲染到DOM,因此官方也将其称为表单绑定!

特点:

  1. Vue通过v-model指令在表单元素上创建双向数据绑定!
  2. v-model 会忽略所有表单元素的 value、checked、selected属性的初始值而总是将 Vue 实例的数据作为数据来源!
  3. 在多行文本输入框区域( <textarea>{{text}}</textarea> ) 插值不会生效,必须用v-model来代替!

绑定单行文本框

<!-- 单行文本 -->
<div id="app">
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
</div>

<script type="text/javascript">
var app = new Vue({
    el: "#app",
    data:{
    	message: ''
    }
})
</script>

当data中的message值为空时会显示表单默认的placeholder的提示语,data中必须要有message,否则无法实时渲染!

绑定多行文本框

<div id="app">
    <textarea v-model="text" placeholder="add multiple lines"></textarea>
    <p style="white-space: pre-line;">多行文本:{{ text }}</p>
</div>

<script type="text/javascript">
var app = new Vue({
    el: "#app",
    data:{
        text: '',
    }
})
</script>

多行文本渲染需要为P标签增加一个行内样式white-space: pre-line, 否则输出数据不能有效换行! 

注意看我在图中<textarea></textarea>标签内写了{{ text }},并没有被渲染,所以一开始特点里的第三项得到了有效验证!

绑定多选按钮

<div id="app">
    <div>
        <input type="checkbox" id="android" value="android" v-model="checkedMessage">
        <label for="android">android</label>
        <input type="checkbox" id="ios" value="ios" v-model="checkedMessage">
        <label for="ios">ios</label>
        <input type="checkbox" id="javaScript" value="javaScript" v-model="checkedMessage">
        <label for="javaScript">javaScript</label>
	<br>
	<p>checked  message: {{ checkedMessage }}</p>
    </div>
</div>

<script type="text/javascript">
var app = new Vue({
    el: "#app",
    data:{
        checkedMessage: []
    }
})
</script>

 

  1. checkedMessage的值为一个数组[]的时候,则会绑定多选框选中value的值,添加到数组中
  2. checkedMessage的值仅为falsetrue的时候,则所有多选框的绑定值也变为true

绑定单选框

<div id="app">
    <div>
    	<input type="radio" id="javaScript" value="javaScript" name="testRadio" v-model="radioMessage">
        <label for="javaScript">javaScript</label>
        <br>
        <input type="radio" id="Vue" value="Vue" name="testRadio" v-model="radioMessage">
        <label for="Vue">Vue</label>
        <br>
        <p>radio message: {{ radioMessage }}</p>
     </div>
</div>

<script type="text/javascript">
var app = new Vue({
    el: "#app",
    data:{
        radioMessage: ''
    }
})
</script>

 

v-model绑定单选框也是绑定了单选框的value值,选中则显示value的值!

绑定select

  1. 当我们使用v-model绑定select的时候,如果select设置为多选的(multiple),那么我们的绑定值(selectedMessage),为数组类型
  2. 如果select单选的,那么我们的绑定值(selectedMessage)为字符串类型
<div id="app">
  <select v-model="selectedMessage" multiple  style="width: 100px;">
     <option>A</option>
     <option>B</option>
     <option>C</option>
 </select>
 <br>
<span>selected  message: {{ selectedMessage }}</span>
</div>

<script type="text/javascript">
var app = new Vue({
    el: "#app",
    data:{
        selectedMessage: []
    }
})
</script>

 

修饰符

v-model除了以上几种用法,还有一个修饰符概念,修饰符以 .name 的形式进行添加,分别为.lazy / .number / '.trim'!

change事件后渲染为.lazy

<input v-model.lazy="msg">

在“change”点击时渲染而非“input”时更新!

输入值转为数值类型为.number

<input v-model.number="age" type="number">

将用户输入的值转为数值类型,如果这个值无法被 parseFloat() 解析,则会返回原始的值。

这通常很有用,因为即使在 type="number" 时,HTML 输入元素的值也总会返回字符串。

过滤输入的收尾空白字符为 .trim 修饰符将自动

.trim 修饰符将自动过滤用户输入的首尾空白字符 这就是 v-model 中最常用的所有内容,大家一定要亲自实现一下上面所有的代码,才能真正把这些东西变成自己的知识。

<input v-model.trim="msg">

 

这就是 v-model 中最常用的所有内容,学编程其实没有什么快速成功的办法,唯一的方法就是多敲代码,多练习,大家可能看到以上这些一看就会,可是在项目中用的时候,往往却忘得干干净净,这既是不熟练的原因,编程熟能生巧!