表单输入绑定 值绑定

简介: 表单输入绑定 值绑定

值绑定

对于单选按钮,复选框和选择器选项,v-model 绑定的值通常是静态的字符串 (或者对复选框是布尔值):

<!-- `picked` 在被选择时是字符串 "a" -->
<input type="radio" v-model="picked" value="a" />
<!-- `toggle` 只会为 true 或 false -->
<input type="checkbox" v-model="toggle" />
<!-- `selected` 在第一项被选中时为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但有时我们可能希望将该值绑定到当前组件实例上的动态数据。这可以通过使用 v-bind 来实现。此外,使用 v-bind 还使我们可以将选项值绑定为非字符串的数据类型。

复选框

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no" />

true-valuefalse-value 是 Vue 特有的 attributes,仅支持和 v-model 配套使用。这里 toggle 属性的值会在选中时被设为 'yes',取消选择时设为 'no'。你同样可以通过 v-bind 将其绑定为其他动态值:

<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

true-valuefalse-value attributes 不会影响 value attribute,因为浏览器在表单提交时,并不会包含未选择的复选框。为了保证这两个值 (例如:“yes”和“no”) 的其中之一被表单提交,请使用单选按钮作为替代。

单选按钮

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

pick 会在第一个按钮选中时被设为 first,在第二个按钮选中时被设为 second

选择器选项

<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>

v-model 同样也支持非字符串类型的值绑定!在上面这个例子中,当某个选项被选中,selected 会被设为该对象字面量值 { number: 123 }

 

相关文章
|
6天前
|
JavaScript
表单输入绑定 值绑定
表单输入绑定 值绑定
|
6天前
|
JavaScript 前端开发 API
表单输入绑定
表单输入绑定
|
6天前
|
iOS开发
表单输入绑定 基本用法
表单输入绑定 基本用法
|
6天前
表单输入绑定 修饰符
表单输入绑定 修饰符
|
JavaScript
Vue表单中判断当前行输入框的值与整个表单的输入框的值是否重复(过滤自身数据)
使用Element输入框自带change事件获取到scope.$index以及input框中的值(@change="change(scope,$event)"); 使用forEach遍历整个表单的数据(item是需要遍历的数组,index是数组中元素的下标);
443 0
Vue表单中判断当前行输入框的值与整个表单的输入框的值是否重复(过滤自身数据)
|
前端开发
前端:input 标签取消账号填充
前端:input 标签取消账号填充
|
JavaScript
v-for动态添加表单,并且获取表单中的值
v-for动态添加表单,并且获取表单中的值
|
监控 JavaScript
页面如何获取checkbox选中的多个值?
页面如何获取checkbox选中的多个值?
203 0
页面如何获取checkbox选中的多个值?
绑定元素属性改变不通知界面
原文:绑定元素属性改变不通知界面 情景假设:绑定的是一个Point,当Point的X或者Y属性发生改变时,绑定的点也随界面改变 此时界面不会发生改变 原因:当X或者Y属性发生改变时并没有触发Point的Set方法   1 2 3 ...
598 0