19.表单输入绑定----复选框 ---(vue入门文档学习记录)

矫情吗；* 2023-10-10 09:48 5阅读 0赞

## 单个复选框 ##

绑定到布尔值:

<body>
    		<div id="app-6">
    			<input type="checkbox" name="checkbox"  v-model="checked" />
    			<label for="checkbox">{
       { checked }}</label>
    		</div>
    		<script type="text/javascript">
    			var vm=new Vue({
    				el:"#app-6",
    				data:{
    					checked:true
    				}
    			})
    		</script>
    	</body>

首先,确定v-model的双向绑定作用:  
  
1.v-model绑定了vue 模板中的参数  
  
2.v-model绑定了label中的值显示

## 多个复选框 ##

<body>
    		<div id="app-6">
    			<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>
    		<script type="text/javascript">
    			var vm = new Vue({
    				el: "#app-6",
    				data: {
    					checkedNames: []
    				}
    			})
    		</script>
    	</body>

参数 checkedNames必须是数组

## 单选按钮 ##

<body>
    		<div id="app-6">
    			<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>
    		<script type="text/javascript">
    			var vm = new Vue({
    				el: "#app-6",
    				data: {
    					picked:""
    				}
    			})
    		</script>
    	</body>

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue - 表单输入绑定详解

Vue.js 表单输入绑定详解在Web开发中，表单是用户与应用程序交互的重要方式之一。Vue.js 提供了强大的表单输入绑定机制，使得在处理用户输入时变得更加简洁和高效

不念不忘少年蓝@/ 2024年02月05日 20:38/ 0 赞/ 61 阅读

相关 Vue 表单输入绑定

基础用法你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神

小鱼儿/ 2023年10月11日 13:06/ 0 赞/ 70 阅读

相关 19.表单输入绑定----复选框 ---(vue入门文档学习记录)

单个复选框绑定到布尔值: <body> <div id="app-6"> <input type="checkbox" name="

矫情吗；*/ 2023年10月10日 09:48/ 0 赞/ 6 阅读

相关 vue学习笔记(六)表单输入绑定

> 前言在上一章[vue学习笔记(四)事件处理器][vue]这一篇博客的内容中，我们已经了解vue是如何绑定事件的，而本篇博客主要讲解的是vue中表单输入的绑定，通常我们自

我不是女神ヾ/ 2023年06月30日 13:55/ 0 赞/ 12 阅读

相关 Vue之表单输入绑定

Example 在HTML中，表单是很常见的。对于`Vue`来说，使用`v-bind`并不能解决表单域对象双向绑定的需求——所谓双向绑定，就是无论是通过`input`还是

约定不等于承诺〃/ 2022年05月15日 18:21/ 0 赞/ 275 阅读

相关 16.绑定Html class ---(vue入门文档学习记录)

绑定Html class 我们可以通过v-bind 动态绑定class,通过表达式拼接出结果即可,表达式的类型可以是字符串,对象或者数组. 对象语法例如:

绝地灬酷狼/ 2021年12月12日 06:37/ 0 赞/ 139 阅读

相关 Vue学习笔记(六) 表单输入绑定

`v-model` 指令在表单元素上创建双向数据绑定，它负责用于监听用户输入事件以更新数据注意，`v-model` 会忽略所有表单元素特性的初始值，而总是将 Vue 实例的

痛定思痛。/ 2021年11月05日 10:26/ 0 赞/ 368 阅读

相关 vue之表单输入绑定

一、v-model指令　　　　用 `v-model` 指令在表单 `<input>`、`<textarea>` 及 `<select>` 元素上创建双向数据绑定。它会根据控

﹏ヽ暗。殇╰゛Y/ 2021年11月02日 13:50/ 0 赞/ 447 阅读

相关 Vue表单输入绑定修饰符

Vue表单输入绑定修饰符 .lazy .number .trim .lazy 在默认情况下，`v-model` 在每次 `input` 事件

╰半夏微凉°/ 2021年10月20日 01:12/ 0 赞/ 395 阅读

相关 Vue表单输入绑定

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

痛定思痛。/ 2021年08月19日 22:15/ 0 赞/ 464 阅读