Vue.js系列教材（六）- vue.js 通过v-model进行双向绑定

Vue.js系列教材（五）- vue.js 使用v-bind进行属性绑定

Vue.js系列教材（七）- vue.js 计算属性 computed的用法举例

工具版本兼容问题

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

步骤 1 :

v-model 双向绑定

edit 顶折

纠问

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

运行效果

代码行数较多，请点击查看

<script src="https://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 :

多种风格数据的绑定

edit 顶折

纠问

运行效果

代码行数较多，请点击查看

<script src="https://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 全屏编辑，再次点击恢复

</table>
 
</div>
    
<script>
  
new Vue({
      el: '#div1',
      data: {
          input:'',
          textarea:'',
          checked:'',
          checkedes:[],
          radio:'',
          selected:'',
          selecteds:[],
          toggle:'',
          
      }
    })
    
</script>

渲染中渲染完成

效果

步骤 3 :

修饰符

edit 顶折

纠问

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

步骤 4 :

修饰符 .lazy

edit 顶折

纠问

对于输入元素，默认的行为方式是一旦有数据变化，马上进行绑定。
但是加上.lazy之后，相当于监听change操作，只有在失去焦点的时候，才会进行数据绑定了

运行效果

代码行数较多，请点击查看

<script src="https://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

edit 顶折

纠问

有时候，拿到了数据需要进行数学运算，为了保证运算结果，必须先把类型转换为number类型，而v-model默认是string类型，所以就可以通过.number方式确保获取到的是数字类型了。

运行效果

代码行数较多，请点击查看

<script src="https://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

edit 顶折

纠问

trim 去掉前后的空白

运行效果

代码行数较多，请点击查看

<script src="https://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 全屏编辑，再次点击恢复

渲染中渲染完成

效果

Vue.js系列教材（五）- vue.js 使用v-bind进行属性绑定

Vue.js系列教材（七）- vue.js 计算属性 computed的用法举例

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

问答区域

2021-02-27 placeholder="输入数据" 这句是什么意思，有什么作用

hfnsc

关于前端部分-Vue.js-双向绑定 -多种风格数据的绑定的提问

如题

<input v-model="input" placeholder="输入数据">

2 个答案

逸闲
答案时间：2021-11-25

放提示信息之类的，当输入或失去焦点后消失

fanchao
答案时间：2021-03-01

input中的提示信息，没输入数据前默认显示的就是‘’输入数据‘’。获取焦点后就消失啦

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-11-27 站长的只能算是单向绑定吧

gugubird

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

<div id="demo"> 半径：<input type="text" v-model.number="radius"/> 周长：<input type="text" v-model.number="result"/>Π </div> <script src="https://how2j.cn/study/vue.min.js"></script> <script> new Vue({ el:"#demo", data:{ radius:1, }, computed:{ result:{ get(){ return this.radius*2 }, set(value){ this.radius=value/2 }, } }, }) </script>

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-09-24 这条希望站长能够看到，你的试一试框有BUG

2020-09-11 单行文本2没法将科学计数法的输入进行输出

2020-01-30 双向绑定

Pony_zsw

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

像这种才叫双向绑定吧 <div id="div1"> <input v-model="name"> <p>{{name}}</p> </div> <script src="http://how2j.cn/study/vue.min.js"></script> <script> new Vue({ el: '#div1', data: { name: 123 } }) </script>

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

</div>
<script src="http://how2j.cn/study/vue.min.js"></script>
<script>
    new Vue({
        el: '#div1',
        data: { name: 123 }
    })
</script>

3 个答案

失眠的天空
答案时间：2021-07-04

站长是修改过代码了嘛，我感觉例子挺不错的呀

ercilan
答案时间：2020-10-30

对，这个实时，更好。站长的容易误解为提交才能更改，没有突出双向

dazhu_
答案时间：2020-02-13

理解错了， v-model 值应和数据名称保持一致

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 4 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

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

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

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

上传截图