how2j.cn

步骤 1 : v-model 双向绑定   
步骤 2 : 多种风格数据的绑定   
步骤 3 : 修饰符   
步骤 4 : 修饰符 .lazy   
步骤 5 : 修饰符 .number   
步骤 6 : 修饰符 .trim   

步骤 1 :

v-model 双向绑定

前面的例子,都是把 Vue对象上的数据显示在视图上,那么如何把视图上的数据放到Vue对象上去呢?
这时就需要用到v-model进行双向绑定
像这样,当input里面的值发生变化的时候,就会自动把变化后的值,绑定到Vue对象上去了

<input v-model="name" >
运行效果
<script src="http://how2j.cn/study/vue.min.js"></script> <div id="div1"> hero name: <input v-model="name" > <button @click="doClick" >提交数据</button> </div> <script> new Vue({ el: '#div1', data:{ name:"teemo" }, methods:{ doClick:function(){ alert(this.name); } } }) </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 2 :

多种风格数据的绑定

运行效果
<script src="http://how2j.cn/study/vue.min.js"></script> <style> table tr td{ border:1px solid gray; padding:10px; } table{ border-collapse:collapse; width:800px; table-layout:fixed; } tr.firstLine{ background-color: lightGray; } </style> <div id="div1"> <table align="center" > <tr class="firstLine"> <td>视图类型</td> <td>输入数据</td> <td>绑定到Vue上的数值</td> </tr> <tr> <td> 单行文本 </td> <td> <input v-model="input" placeholder="输入数据"> </td> <td> <p>{{ input }}</p> </td> </tr> <tr> <td> 多行文本 </td> <td> <textarea v-model="textarea" placeholder="输入数据"></textarea> </td> <td> <p>{{ textarea }}</p> </td> </tr> <tr> <td> 单个复选框 </td> <td> <input type="checkbox" id="checkbox" v-model="checked"> </td> <td> <p>{{ checked }}</p> </td> </tr> <tr> <td> 多个复选框 </td> <td> <input type="checkbox" id="teemo" value="teemo" v-model="checkedes"> <label for="teemo">teemo</label> <input type="checkbox" id="gareen" value="gareen" v-model="checkedes"> <label for="gareen">gareen</label> <input type="checkbox" id="annie" value="annie" v-model="checkedes"> <label for="annie">annie</label> </td> <td> <p>{{ checkedes }}</p> </td> </tr> <tr> <td> 单选按钮 </td> <td> <input type="radio" id="one" value="One" v-model="radio"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="radio"> <label for="two">Two</label> </td> <td> <p>{{ radio }}</p> </td> </tr> <tr> <td> 单选选择框 </td> <td> <select v-model="selected" size="5"> <option disabled value="">请选择</option> <option>AD</option> <option>AC</option> <option>ADC</option> </select> </td> <td> <p>{{ selected }}</p> </td> </tr> <tr> <td> 多选选择框 </td> <td> (通过ctrl或者shift进行多选)<br> <select v-model="selecteds" multiple size="5"> <option disabled value="">请选择</option> <option>AD</option> <option>AC</option> <option>ADC</option> </select> </td> <td> <p>{{ selecteds }}</p> </td> </tr> <tr> <td> 单个复选框 </td> <td> 默认值是true或者false,也可以修改为自定义的值<br> <input type="checkbox" id="toggle" true-value="yes" false-value="no" v-model="toggle"> </td> <td> <p>{{ toggle }}</p> </td> </tr> </table> </div> <script> new Vue({ el: '#div1', data: { input:'', textarea:'', checked:'', checkedes:[], radio:'', selected:'', selecteds:[], toggle:'', } }) </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 3 :

修饰符

vue.js 还提供了一些修饰符方便用户操作,常见的有
.lazy
.number
.trim
接下来一一举例说明
步骤 4 :

修饰符 .lazy

对于输入元素,默认的行为方式是一旦有数据变化,马上进行绑定。
但是加上.lazy之后,相当于监听change操作,只有在失去焦点的时候,才会进行数据绑定了
运行效果
<script src="http://how2j.cn/study/vue.min.js"></script> <style> table tr td{ border:1px solid gray; padding:10px; } table{ border-collapse:collapse; width:800px; table-layout:fixed; } tr.firstLine{ background-color: lightGray; } </style> <div id="div1"> <table align="center" > <tr class="firstLine"> <td>视图类型</td> <td>输入数据</td> <td>绑定到Vue上的数值</td> </tr> <tr> <td> 单行文本1 </td> <td> <input v-model.lazy="input1" placeholder="输入数据"> </td> <td> <p>{{ input1 }}</p> </td> </tr> <tr> <td> 单行文本2 </td> <td> <input v-model.lazy="input2" placeholder="输入数据"> </td> <td> <p>{{ input2 }}</p> </td> </tr> </table> </div> <script> new Vue({ el: '#div1', data: { input1:'', input2:'' } }) </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 5 :

修饰符 .number

有时候,拿到了数据需要进行数学运算, 为了保证运算结果,必须先把类型转换为number类型,而v-model默认是string类型,所以就可以通过.number方式确保获取到的是数字类型了。
运行效果
<script src="http://how2j.cn/study/vue.min.js"></script> <style> table tr td{ border:1px solid gray; padding:10px; } table{ border-collapse:collapse; width:800px; table-layout:fixed; } tr.firstLine{ background-color: lightGray; } </style> <div id="div1"> <table align="center" > <tr class="firstLine"> <td>视图类型</td> <td>输入数据</td> <td>绑定到Vue上的数值</td> <td>数值类型</td> </tr> <tr> <td> 单行文本1 </td> <td> <input v-model="input1" type="number" placeholder="输入数据"> </td> <td> <p>{{ input1 }}</p> </td> <td> <p>{{ typeof input1 }}</p> </td> </tr> <tr> <td> 单行文本2 </td> <td> <input v-model.number="input2" type="number" placeholder="输入数据"> </td> <td> <p>{{ input2 }}</p> </td> <td> <p>{{ typeof input2 }}</p> </td> </tr> </table> </div> <script> new Vue({ el: '#div1', data: { input1:'', input2:'' } }) </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 6 :

修饰符 .trim

trim 去掉前后的空白
运行效果
<script src="http://how2j.cn/study/vue.min.js"></script> <style> table tr td{ border:1px solid gray; padding:10px; } table{ border-collapse:collapse; width:800px; table-layout:fixed; } tr.firstLine{ background-color: lightGray; } </style> <div id="div1"> <table align="center" > <tr class="firstLine"> <td>视图类型</td> <td>输入数据</td> <td>绑定到Vue上的数值</td> </tr> <tr> <td> 单行文本 </td> <td> <input v-model.trim="input" placeholder="输入数据"> </td> <td> <p>"{{ input }}"</p> </td> </tr> </table> </div> <script> new Vue({ el: '#div1', data: { input:'', input2:'' } }) </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-07-28 双向绑定一个更简单的栗子~
TZMMichael



看代码~
<body>
  <script src="./node_modules/vue/dist/vue.js"></script>

  <div id="div1">
    <input type="text" v-model="name">
    <div>{{name}}</div>
  </div>

  <script>
    new Vue({
      el: '#div1',
      data: {
        name: "tzm"
      }
    })
  </script>
</body>

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-07-17 .number数值类型和vue.js的版本有关系
啦啦啦1288



用这个版本的,即使不加.number,填了数字,返回的也是numer类型。用群主您的版本的,都是String类型。运行结果如截图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.firstLine{
    background-color: lightGray;
}
</style>
<body>
<!--view层  -->
<div id="app">
   <table>
			<tbody>
				<tr class="firstLine">
	             <td>输入数据</td>
	            <td>绑定到Vue上的数值</td>
	            <td>数值类型</td>
	        	</tr>  
				<tr> 
				   <td><input placeholder="输入数据,只有是数字才显示" type="number"  v-model="message" >
				   </td>
				   <td>{{message}}</td>
				    <td>  {{ typeof message }}
				   </td>
				</tr>
				<tr> 
				   <td><input placeholder="输入数据,只有是数字才显示" type="number"  v-model.number="message2" >
				   </td>
				   <td>{{message2}}</td>
				    <td>  {{ typeof message2 }}
				   </td>
				</tr>
				
		      
		    </tbody>
		</table>
	</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">
</script>
<script >
/* Model层 */
var exampleData ={
message: '',
message2: ''
}
new Vue({
  el:'#app',
  data:exampleData
})
</script>
</html>

							


1 个答案

TZMMichael 答案时间:2018-07-28
我用npm下的最新的包,和站长的是一致的




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到









提问之前请登陆
关于 前端部分-Vue.js-双向绑定 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图