vue学习九(表单输入绑定v-model)

本文主要是介绍vue学习九(表单输入绑定v-model)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

v-model 表单基础用法

你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定，v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

文本

 <div id="div1"><input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p></div><script type="text/javascript">new Vue({el: "#div1",data: {message: "msg"}})</script>

效果图：当在文本框中输入等等，响应的更新到P标签文本

等等（这里是文本框）
Message is: 等等

多行文本

  <div id="div2"><span>Multiline message is:</span><p style="white-space: pre-line;">{{ message }}</p><br><textarea v-model="message" placeholder="add multiple lines"></textarea></div><script type="text/javascript">new Vue({el: "#div2",data: {message: "msg"}})</script>

复选框

 <div id="div3"><input type="checkbox" id="checkbox" v-model="checkeder"><label for="checkbox">{{ checkeder }}</label></div><script type="text/javascript">new Vue({el: "#div3",data: {checkeder: false}})</script>

多个复选框

<div id='example-3'><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><script type="text/javascript">new Vue({el: "#example-3",data: {checkedNames: []}})</script>

效果如下：

单选按钮

<div id="example-4"><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><script type="text/javascript">new Vue({el: "#example-4",data: {picked: ""}})</script>

效果如下：

选择框

    <div id="example-5"><select v-model="selecteder"><option disabled value="">请选择</option><option>A</option><option>B</option><option>C</option></select><span>Selected: {{ selecteder }}</span></div><script type="text/javascript">new Vue({el: '#example-5',data: {selecteder: ''}})</script>

效果图：

多选择框

 <div id="example-6"><select v-model="selected" multiple style="width: 50px;"><option>A</option><option>B</option><option>C</option></select><br><span>Selected: {{ selected }}</span></div><script type="text/javascript">new Vue({el: '#example-6',data: {selected: []}})</script><!-- 7、用 v-for 渲染的动态选项： --><div id="div4"><select v-model="selected"><option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option></select><span>Selected: {{ selected }}</span></div>

效果图：

v-for 渲染的动态选项

<div id="div4"><select v-model="selected"><option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option></select><span>Selected: {{ selected }}</span></div><script type="text/javascript">new Vue({el: '#div4',data: {selected: 'A',options: [{ text: 'One', value: 'A' },{ text: 'Two', value: 'B' },{ text: 'Three', value: 'C' }]}})</script>

效果图如下：

lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

   <div id="div5"><input v-model.lazy="msg"><p>{{ msg }}</p></div><script type="text/javascript">new Vue({el: "#div5",data: {msg: "信息"}})</script>

number

<div id="div6"><input v-model.number="age" type="number"><p>{{ age }}</p></div><script type="text/javascript">new Vue({el: "#div6",data: {age: 5}})</script>

trim

  <div id="div7"><input v-model.trim="msg"><p>{{ msg }}</p></div><script type="text/javascript">new Vue({el: "#div7",data: {msg: "  我的  "}})</script>

这篇关于vue学习九(表单输入绑定v-model)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---