Vue表单输入绑定(v-model)

1.文本框

<div id="app"><input v-model="message" type="text" placeholder="ZMR"/><p>{{message}}</p>
</div>

<script>var vm = new Vue({el:"#app",data:{message:"ZMR"}})
</script>

2.文本域

<div id="app"><textarea v-model="ZMR" cols="60" rows="4"></textarea><br><span>文本域</span>{{ZMR}}
</div>

<script>var vm = new Vue({el:"#app",data:{ZMR:""}})
</script>

3.复选框

<div id="app"><input type="checkbox" value="playgame" v-model="checkedNames"/><label>playgame</label><input type="checkbox" value="playgames" v-model="checkedNames"/><label>playgames</label><input type="checkbox" value="playgameplan" v-model="checkedNames"/><label>playgameplan</label><br><span>{{checkedNames}}</span>
</div>

<script>var vm = new Vue({el:"#app",data:{checkedNames:[]}})
</script>

4.单选按钮

<div id="app"><input type="radio" value="man" v-model="sex"/><lable>man</lable><br><input type="radio" value="woman" v-model="sex"/><lable>woman</lable><span>{{sex}}</span>
</div>

<script>var vm  = new Vue ({el:"#app",data:{sex:""}})
</script>

5.选择列表

<div id="app"><select v-model="love"><option value="">game</option><option>swim</option><option>piano</option><option>chemistry</option></sclect><span>{{love}}</span>
</div>

<script>var vm  = new Vue ({el:"#app",data:{love:""}})
</script>

Vue表单输入绑定(v-model)相关推荐

Vue表单输入绑定（文本框和复选框）
文本框 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
Vue表单输入绑定(元婴中期)
表单输入绑定基础用法你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自 ...
9.Vue 表单输入绑定
基础用法你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方 ...
Vue007_ 表单输入绑定
表单输入绑定使用 v-model 对表单数据自动收集 1) text/textarea 2) checkbox 3) radio 4) select <!DOCTYPE html> & ...
uniapp 输入法画面_表单输入绑定 · uni-app跨平台移动应用开发 · 看云
# 表单输入绑定 ## [基础用法](https://cn.vuejs.org/v2/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95 &qu ...
Vue.js 表单输入绑定
基础用法你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方 ...
Vue学习笔记(六) 表单输入绑定
v-model 指令在表单元素上创建双向数据绑定,它负责用于监听用户输入事件以更新数据注意,v-model 会忽略所有表单元素特性的初始值,而总是将 Vue 实例的数据作为数据来源 1.输入框 &l ...
Vue表单双向绑定显示，小程序水果外卖水果外卖模式水果外卖怎么做做个水果蔬菜配送的小程序外卖水果小程序水果店小程序门店
<div id="app"><p>input 元素:</p><input v-model="message" plac ...
Vue - 表单
表单输入绑定用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 ...
Vue基础-09-表单输入绑定
Vue基础-09-表单输入绑定 Vue中想要操作表单的数据,无需再dom操作.比如登录.注册.添加 Vue中提供了一个指令v-model,可以表单的双向数据绑定双向绑定表单原始上面通过v-mode ...

Vue表单输入绑定(v-model)

Vue表单输入绑定(v-model)相关推荐

最新文章

热门文章