vue.js 双向数据绑定 v-model（十二）

Dear 丶 2023-02-22 10:36 7阅读 0赞

用v-model 属性实现表单 , 和 元素上创建和 data对象中的属性进行双向数据绑定。双向数据绑定即 如果 data属性中的 元素值发生变化， 标签元素的值也会发生变化。 标签元素的值发生变化，data属性中响应属性的值也会发生变化。它会根据不同控件使用不同属性及方法。

input和 textarea元素使用value属性 和 input事件  
checkbox 和 radio 使用 checked属性 和 change事件  
select 字段使用 value属性 和 change事件

<div id="app">
    	<div id="example-1">
    		<input v-model="message" placeholder="edit me">
    		<p>Message is: {
       { message }}</p>
    		<textarea v-model="message2" placeholder="add multiple lines"></textarea>
    		<p style="white-space: pre-line;">{
       { message2 }}</p>
    		<br />
    		
    		<div style="margin-top:20px;">
    			<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    			<label for="jack">Jack</label>
    			<input type="checkbox" id="john" value="John" v-model="checkedNames">
    			<label for="john">John</label>
    			<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    			<label for="mike">Mike</label>
    			<br>
    			<span>Checked names: {
       { checkedNames }}</span>
    		</div>
    		
    		<div style="margin-top:20px;">
    			<input type="radio" id="one" value="One" v-model="picked">
    			<label for="one">One</label>
    			<br>
    			<input type="radio" id="two" value="Two" v-model="picked">
    			<label for="two">Two</label>
    			<br>
    			<span>Picked: {
       { picked }}</span>
    		</div>
    		<button type="button" @click="submit">提交</button>
    	</div>
    	
    </div>
    <script type="text/javascript"> var vm = new Vue({ el : "#app", data : { message : "test", message2 :"hi", checkedNames : ['Jack', 'John'], picked : "Two" }, methods: { submit : function () { console.log(this.message); } } }); </script>

当input元素输入内容时，由于使用v-model 与 data对象的message进行双向绑定，当输入内容时，引发input事件，则message的值将更新为最新input框中的值，并且使用了插值的方式 将 message输出，由于vue的响应式系统，message值发生改变则 视图也发生改变。所以呈现的结果就是 输入input的内容 会实时更新到下一行显示。