• 新版网站前后台即将上线,2019年将致力于提高文章质量,加大原创力度,打造一个更加舒适的阅读体验!
  • 极客文库小编@勤劳的小蚂蚁,为您推荐每日资讯,欢迎关注!
  • 新版网站前后台即将上线,2019年将致力于提高文章质量,加大原创力度,打造一个更加舒适的阅读体验!
  • 如果有任何体验不佳的地方,欢迎向客服反馈!

Vue.js入门-5-表单输入绑定

编程语言 Geekerstar 11个月前 (04-14) 242次浏览 已收录 0个评论 扫描二维码
文章目录[隐藏]

 

基础用法

可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

文本

<input v-model="message" placeholder="edit me">
<p>Message is: { {  message  } }</p>

多行文本

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{ {  message  } }</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

复选框

单个复选框,绑定到布尔值:

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{ {  checked  } }</label>

多个复选框,绑定到同一个数组:

<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>

new Vue({ 
  el: '#example-3',
  data: { 
    checkedNames: []
   }
 })

单选按钮

v-model 绑定的值为 value。One 或者 Two

<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>

new Vue({ 
  el: '#example-4',
  data: { 
    picked: ''
   }
 })

选择框

v-model 绑定的值,在选中的情况下为 option 的 value

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: { {  selected  } }</span>
</div>

new Vue({ 
  el: '...',
  data: { 
    selected: ''
   }
 })

多选时 (绑定到一个数组):

<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>

new Vue({ 
  el: '#example-6',
  data: { 
    selected: []
   }
 })

用 v-for 渲染的动态选项:

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    { {  option.text  } }
  </option>
</select>
<span>Selected: { {  selected  } }</span>

new Vue({ 
  el: '...',
  data: { 
    selected: 'A',
    options: [
      {  text: 'One', value: 'A'  },
      {  text: 'Two', value: 'B'  },
      {  text: 'Three', value: 'C'  }
    ]
   }
 })

值绑定

对于单选按钮,复选框及选择框的选项,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>

**把值绑定到 Vue 实例的一个动态属性上,这时可以用 `v-bind` 实现**

复选框

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

// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'

单选按钮

<input type="radio" v-model="pick" v-bind:value="a">

// 当选中时
vm.pick === vm.a

选择框的选项

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

// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

修饰符

.lazy

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

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

.number

如果想自动将用户的输入值转为数值类型,可以给 `v-model` 添加 `number `修饰符:如果转换不成功则返回原值。

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

.trim

如果要自动过滤用户输入的首尾空白字符,可以给 `v-model` 添加 `trim` 修饰符:

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

丨极客文库, 版权所有丨如未注明 , 均为原创丨
本网站采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行授权
转载请注明原文链接:Vue.js 入门-5-表单输入绑定
喜欢 (0)
[247507792@qq.com]
分享 (0)
Geekerstar
关于作者:
本站技术支持

欢迎 注册账号 登录 发表评论!

  • 精品技术教程
  • 编程资源分享
  • 问答交流社区
  • 极客文库知识库

客服QQ


QQ:2248886839


工作时间:09:00-23:00