表单

v-model 指令在表单控件元素上创建双向数据绑定。

<div id=\"app\">
 <p>input 元素：</p>
 <input v-model=\"message\" placeholder=\"编辑我……\">
 <p>消息是: {{ message }}</p>
   
 <p>textarea 元素：</p>
 <p style=\"white-space: pre\">{{ message2 }}</p>
 <textarea v-model=\"message2\" placeholder=\"多行文本输入……\"></textarea>
</div>

< >
new Vue({
 el: \'#app\',
 data: {
   message: \'Runoob\',
   message2: \'菜鸟教程\\r\\nhttp://www.runoob.com\'
 }
})
</ >
</body>`

复选框

<body>
<div id=\"app\">
  <p>单个复选框：</p>
  <input type=\"checkbox\" id=\"checkbox\" 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>
</div>

< >
new Vue({
  el: \'#app\',
  data: {
	checked : false,
    checkedNames: []
  }
})
</ >
</body>

单选按钮

<div id=\"app\">
  <input type=\"radio\" id=\"runoob\" value=\"Runoob\" v-model=\"picked\">
  <label for=\"runoob\">Runoob</label>
  <br>
  <input type=\"radio\" id=\"google\" value=\"Google\" v-model=\"picked\">
  <label for=\"google\">Google</label>
  <br>
  <span>选中值为: {{ picked }}</span>
</div>
 
< >
new Vue({
  el: \'#app\',
  data: {
    picked : \'Runoob\'
  }
})
</ >

select列表

<div id=\"app\">
  <select v-model=\"selected\" name=\"fruit\">
    <option value=\"\">选择一个网站</option>
    <option value=\"www.runoob.com\">Runoob</option>
    <option value=\"www.google.com\">Google</option>
  </select>
 
  <div id=\"output\">
      选择的网站是: {{selected}}
  </div>
</div>

< >
new Vue({
  el: \'#app\',
  data: {
	selected: \'\' 
  }
})
</ >

修饰符
.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<!-- 在 \"change\" 而不是 \"input\" 事件中更新 -->
<input v-model.lazy=\"msg\" >

.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number=\"age\" type=\"number\">

这通常很有用，因为在 type=“number” 时 HTML 中输入的值也总是会返回字符串类型。

.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim=\"msg\">

全选与反全选
html

<div id=\"app\">
	<p>
		全选：
	</p>
	<input type=\"checkbox\" id=\"checkbox\" v-model=\"checked\" @change=\"changeAllChecked()\">
	<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>
</div>

js

new Vue({
    el: \'#app\',
    data: {
        checked: false,
        checkedNames: [],
        checkedArr: [\"Runoob\", \"Taobao\", \"Google\"]
    },
    methods: {
        changeAllChecked: function() {
            if (this.checked) {
                this.checkedNames = this.checkedArr
            } else {
                this.checkedNames = []
            }
        }
    },
    watch: {
        \"checkedNames\": function() {
            if (this.checkedNames.length == this.checkedArr.length) {
                this.checked = true
            } else {
                this.checked = false
            }
        }
    }
})

参考：https://www.runoob.com/vue2/vue-forms.html

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月18日 星期一

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章