前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >(11)打鸡儿教你Vue.js

(11)打鸡儿教你Vue.js

作者头像
达达前端
发布2019-07-03 11:05:35
3810
发布2019-07-03 11:05:35
举报
文章被收录于专栏:达达前端达达前端

表单

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

image

代码语言:javascript
复制
<div id="app">
  <p>单个复选框:</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
    
  <p>多个复选框:</p>
  <input type="checkbox" id="da" value="da" v-model="checkedNames">
  <label for="da">da</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>
 
<script>
new Vue({
  el: '#app',
  data: {
    checked : false,
    checkedNames: []
  }
})
</script>

单选按钮:

代码语言:javascript
复制
<div id="app">
  <input type="radio" id="da" value="da" v-model="picked">
  <label for="da">da</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>选中值为: {{ picked }}</span>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    picked : 'da'
  }
})
</script>
代码语言:javascript
复制
<div id="app">
  <select v-model="selected" name="com">
    <option value="">选择一个网站</option>
    <option value="www.da.com">da</option>
    <option value="www.google.com">Google</option>
  </select>
 
  <div id="output">
      选择的网站是: {{selected}}
  </div>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    selected: '' 
  }
})
</script>

修饰符 .lazy转变为在 change 事件中同步

代码语言:javascript
复制
<input v-model.lazy="msg" >

.number

代码语言:javascript
复制
<input v-model.number="age" type="number">

.trim

代码语言:javascript
复制
<input v-model.trim="msg">
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.06.28 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档