Vue之v-model指令的使用

最新推荐文章于 2024-08-23 13:16:08 发布

Freya_yyy

最新推荐文章于 2024-08-23 13:16:08 发布

阅读量999

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue v-model 自定义组件 input元素

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/Freya_yyy/article/details/81180464

Vue 专栏收录该内容

7 篇文章

订阅专栏

1.Vue的常用指令v-model 可以在表单<input>及<textarea>元素上创建双向数据绑定，会根据控件的类型自动选取正确的方法来更新元素。它负责监听用户的输入时间以更新数据。其在不同的控件类型的绑定结果如下所示：

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单input绑定</title>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
 
<!-- 单行文本（text） -->
<input v-model="message" placeholder="编辑">
<p>message是：{{message}}</p>


<!-- 多行文本（multiple text） -->
<p style="white-space: pre">message2是：{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>

<!-- 复选框（checkbox） -->
<p>单个复选框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checked">
<label for="checkbox">{{checked}}</label>

<p>多个复选框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">Taobao</label>
<br>
<span>选择的值为：{{checkedNames}}</span>
<br>

<!-- 单选按钮（radio） -->
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="one">Two</label>
<br>
<span>选中的值为：{{picked}}</span>
<br>

<!-- select列表 -->
<select v-model="selected">
	  <option disabled value="">请选择其中一项</option>
	  <option value="a">A</option>
	  <option value="b">B</option>
	  <option value="c">C</option>
</select>
<span>选中的是：{{ selected }}</span>
<br>
<!-- 多选 select（绑定到一个数组） -->
<select v-model="selected2" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>选中的是：{{ selected2 }}</span><br>

<!-- v-model的修饰符：lazy,number,trim -->
<p>1111</p>
<input type="text" v-model="msg"><br>
<label>{{msg}}</label>
<p>222</p>
<input v-model.lazy="msg2" ><br>
<label>{{msg2}}</label>
<input v-model.number="age" type="number"><br>
<input v-model.trim="msg1"><br>
</div>


<script>
	var a=1
var app = new Vue({
	el:"#app",
	data:{
		message:"hello vue.js!",
		message2:"百度官网\r\nhttps://www.baidu.com/",
		checked:false,
		checkedNames:[],
		picked:'One',
		selected:'a',
		selected2:['A','B'],
		age:12.12,
		msg:'hello',
		msg1:'',
		msg2:''	
		
	},
	methods:{
	}
	
})
</script>
</body>
</html

对于单选按钮，复选框及选择框的选项，v-model绑定的值通常是静态字符串 (对于复选框也可以是布尔值)；但是有时我们想把值绑定到 Vue 实例的一个动态属性上，这时可以用v-bind实现，并且这个属性的值可以不是字符串。

2.在组件上使用v-model：

自定义事件也可以用于创建支持v-model的自定义输入组件。

切记：

<input v-model="searchText">
<!--等价于-->
<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

<!--当用在组件上时，v-model 则会这样：-->
<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

为了让它正常工作，这个组件内的<input>必须：

a.将其value特性绑定到一个名叫value 的 prop 上;

b.在其input 事件被触发时，将新的值通过自定义的input事件抛出。

修改后的代码如下：

<!DOCTYPE>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vue组件</title>	
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <custom-input v-model="searchText"></custom-input>
    <p>{{searchText}}</p>
</div>	


<script>
Vue.component('custom-input',{
  props:['value'],
  template:`<input
            v-bind:value="value"
            v-on:input="$emit('input', $event.target.value)"
            >
            `
})
new Vue({
	el:'#app',
  data:{
    searchText:"hello"
  }

})

</script>
</body>
</html>