Vue.js表单控件绑定示例盘点
更新时间：2023年07月21日 10:25:00 作者：小白兔zqd
这篇文章主要为大家介绍了一些Vue.js表单控件绑定示例盘点，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
v-model 指令在表单控件元素上创建双向数据绑定
可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。
1、单行文本
<body>
<div id="example">
<input type="text" v-model="message">
<p>Message is:{{message}}</p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
message:""
}
});
</script>2、多行文本
<body>
<div id="example">
<span>Mulitline message is:</span>
<p style="white-space:pre">{{message}}</p>
<br>
<textarea v-model="message" placeholder="add mulitine lines..."></textarea>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
message:""
}
});
</script>3、复选框
<body>
<div id="example">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
checked:false
}
});
</script>4、复选框（升级版）
<body>
<div id="example">
<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>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
checkedNames:[]
}
});
</script>5、单选按钮
<body>
<div id="example">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked:{{picked}}</span>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
picked:""
}
});
</script>6、选择列表
<body>
<div id="example">
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Sclected:{{selected}}</span>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
selected:""
}
});
</script>7、绑定value
复选框
<body>
<div id="example">
<input
type="checkbox"
v-model="toggle"
v-bind:true-value="a"
v-bind:false-value="b">
<p>{{toggle}}</p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
a:'a',
b:'b' ,
toggle:"b"
}
});
</script>单选按钮
<body>
<div id="example">
<input
type="radio"
v-model="picked"
v-bind:value="a">
<p>{{picked}}</p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#example',
data:{
a:'a',
picked:""
}
});
</script>以上就是Vue.js表单控件绑定示例盘点的详细内容，更多关于Vue表单控件绑定的资料请关注脚本之家其它相关文章！
相关文章
idea编译器出现Vue缩进报错，怎么解决呢，很多朋友遇到这个问题都很棘手，不知该如何解决，今天小编给大家通过场景分析介绍解决方案，需要的朋友参考下吧2021-07-07
Vant是一套轻量、可靠的移动端组件库,通过Vant可以快速搭建出风格统一的页面,提升开发效率,下面这篇文章主要给大家介绍了关于Vant2移动端Vue组件库问题的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Vue实现virtual-dom的原理简析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
vuex中...mapstate和...mapgetters的区别及说明
这篇文章主要介绍了vuex中...mapstate和...mapgetters的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
这篇文章主要介绍了vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了vue如何实现动态加载脚本,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
vue3不能使用history.pushState修改url参数踩坑
这篇文章主要为大家介绍了vue3不能使用history.pushState修改url参数踩坑解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了查找Vue中下标的操作(some和findindex)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了Vue中引入使用patch-package为依赖打补丁问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue-router启用history模式下的开发及非根目录部署方法
这篇文章主要介绍了vue-router启用history模式下的开发及非根目录部署方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
最新评论