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表单控件绑定的资料请关注脚本之家其它相关文章！
相关文章
Vue.js每天必学之内部响应式原理探究，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
Vue中的element tabs点击锚点定位,鼠标滚动定位
这篇文章主要介绍了Vue中的element tabs点击锚点定位,鼠标滚动定位方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要介绍了Vue传值-三种常用传值示例，主要介绍了父组件向子组件进行传值，子组件向父组件传值和非父子组件进行传值，感兴趣的小伙伴们可以参考一下2021-11-11
本文分步骤给大家介绍了Vue 1.0自定义动画效果，vue1.0代码结合animate.css定义动画，页面一定要引入animate.cdd，具体实例代码大家参考下本文2018-07-07
这篇文章主要给大家介绍了基于vue+electron实现文件下载打开wps预览,文中有详细的代码示例供大家借鉴参考,感兴趣的同学可以参考阅读下2023-08-08
这篇文章主要介绍了vue+elementUI 实现内容区域高度自适应的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-09-09
vue3中使用@vueuse/core中的图片懒加载案例详解
这篇文章主要介绍了vue3中使用@vueuse/core中的图片懒加载案例,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue实现横向时间轴组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
下面小编就为大家分享一篇Vue用v-for给src属性赋值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要给大家介绍了关于如何用Vue3切换中英文显示的相关资料,在Vue3中使用vue-i18n进行国际化设置,包括安装、配置、在组件中使用$t方法获取翻译字符串,以及可选的动态加载语言包以提高性能,需要的朋友可以参考下2024-11-11
最新评论