程序员经验分享-hwhale

v-model的使用

2023-10-28

 目录

一、v-model 的原理

二、v-model 结合radio 使用

三、v-model 结合checkbox 类型单选使用

四、v-model 结合checkbox 多选使用

五、v-model 结合select 使用

六、v-model 的修饰符的使用

一、v-model 的原理

v-model指令用来实现表单元素和数据的双向绑定，等价于v-bind和v-on共同作用监听绑定数据；v-bind绑定value属性的值；v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中

<div id="app">

          <input type="text" v-model="msg"/>

          <h2>{{msg}}</h2>

        </div>

        <script src="../vue.js"></script>

        <script>

          const vm = new Vue({

            el:'#app',

            data(){

              return {

                msg:"呦呦鹿鸣~@"

              }

            }

          })

        </script>

​ v-model双向绑定，既输入框的value改变，对应的message对象值也会改变，修改message的值，input的value也会随之改变。无论改变那个值，另外一个值都会变化。 

同理于：

<div id="app">

            <input type="text" @input="changeValue" :value="msg"/>

            <h2>{{msg}}</h2>

        </div>

        <script>

            const vm = new Vue({

                el:'#app',

                data(){

                    return {

                        msg:"呦呦鹿鸣~@"

                    }

                },

                methods:{

                    changeValue(e){

                        console.log(e);

                        this.msg = e.target.value

                    }

                }

               

            })

        </script>

v-model = v-bind + v-on，实现双向绑定需要是用v-bind和v-on，使用v-bind给input的value绑定message对象，此时message对象改变，input的值也会改变。但是改变input的value并不会改变message的值，此时需要一个v-on绑定一个方法，监听事件，当input的值改变的时候，将最新的值赋值给message对象。$event获取事件对象，target获取监听的对象dom，value获取最新的值。 

 实现效果：

二、v-model 结合radio 使用

 radio单选框的name属性是互斥的，如果使用v-model，可以不使用name就可以互斥。

使用name 属性时，属性值要一样，因为系统判定要选的是男还是女，是互斥的结果，如果属性值不一样，则选框男女都可以选。

           <label for="male">

                <input type="radio" id="male" name="sex" value="男" >男

            </label>

            <label for="female">

                <input type="radio" id="female" name="sex1" value="女" >女

            </label>

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

            <label for="male">

                <input type="radio" id="male" name="sex" value="男" v-model="sex">男

            </label>

            <label for="female">

                <input type="radio" id="female" name="sex" value="女" v-model="sex">女

            </label>

            <div>你选择的性别是：{{sex}}</div>

        </div>

        <script>

            const vm = new Vue({

                el: '#app',

                data() {

                    return {

                        sex:'男'

                    }

                }

            })

        </script>

    </body>

</html>

 v-model绑定`sex`属性，初始值为“男”，选择女后`sex`属性变成“女”，因为此时是双向绑定。

三、v-model 结合checkbox 类型单选使用

​ checkbox可以结合v-model做单选框，也可以多选框。这里做单选用时：

用一个动态的值来控制其状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<label for="agree">
				<input type="checkbox" id="agree" v-model="isAgree">同意协议
			</label>
			<div style="margin:20px 0 0 0;">
				<button type="button" :disabled="!isAgree">下一步</button>
			</div>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
                        isAgree:false
					}
				},
				watch:{
					/* isAgree(n,o){
						console.log(n);
						console.log(o);
					} */ //监听 isAgree 值的变化，但监听不到第一次的值

					isAgree:{
						handler(n,o){
							console.log(n);
							console.log(o);
						},
						immediate:true  //立即监听isAgree的值，从第一次的值开始
					}
				}

			})
		</script>
	</body>
</html>

 呦呦鹿鸣

四、v-model 结合checkbox 多选使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--多选框-->
  <h2>多选框</h2>
  
    <input type="checkbox" name="hobby" value="篮球"  v-model="hobbies">篮球
    <input type="checkbox" name="hobby" value="足球"  v-model="hobbies">足球
    <input type="checkbox" name="hobby" value="羽毛球"  v-model="hobbies">羽毛球
    <input type="checkbox" name="hobby" value="乒乓球"  v-model="hobbies">乒乓球
  <h2>你的爱好是：{{hobbies}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      hobbies: []

    }
  })
</script>
</body>
</html>

还可以：

值的绑定：

原理：遍历数组的值，动态的监听绑定数组的值放置空数组里（v-model选定的值，每点一次会有一个value值，把value响应的值给v-model绑定的值—响应式原理可以解释）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<label :for="item" v-for="(item,index) in hhobbies" :key="index">
				<input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}}
			</label>
			
			您的选择是:<h2>{{hobbies}}</h2>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						hobbies: [],
						hhobbies: ["篮球", "足球", "乒乓球", "羽毛球"]
					}
				}

			})
		</script>
	</body>
</html>
  1. checkbox结合v-model实现单选框，定义变量isAgree初始化为false，点击checkbox的值为true，isAgree也是true。
  2. checkbox结合v-model实现多选框，定义数组对象hobbies，用于存放爱好，将hobbies与checkbox对象双向绑定，此时选中，一个多选框，就多一个true，hobbies就添加一个对象。

五、v-model 结合select 使用

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script src="../vue.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">
            <select name="fruit" v-model="fruit">
                <option value="苹果">苹果</option>
                <option value="香蕉">香蕉</option>
                <option value="西瓜">西瓜</option>
            </select>
            您的选择是：{{fruit}}
        </div>
        <script>
            const vm = new Vue({
                el: '#app',
                data() {
                    return {
                        fruit:'苹果'
                    }
                }
            })
        </script>
    </body>
</html>

用v-on 和v-bind 来写：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<select name="fruit" :value="fruit" @input="change">
				<option value="苹果">苹果</option>
				<option value="香蕉">香蕉</option>
				<option value="西瓜">西瓜</option>
			</select>
			您的选择是：{{fruit}}
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
                        fruit:'苹果',
					}
				},
				methods:{
					change(e){
						console.log(e);
						this.fruit = e.target.value
					}
				}

			})
		</script>
	</body>
</html>

​ v-model结合select可以单选也可以多选。 

 

六、v-model 的修饰符的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div id="app">
            <input type="text" v-model="message" />
            <h2>{{message}}</h2>

            <input type="text" v-model="age" />
            <h2>{{age}}---{{typeof age}}</h2>

            <input type="text" v-model="name" />
            <h2>{{name}}</h2>
        </div>
        <script>
            const vm = new Vue({
                el: '#app',
                data() {
                    return {
                        message: "zzz",
                        age: 18,
                        name: "ttt"
                    }
                }
            })
      </script>
	</body>
</html>
  1. lazy：默认情况下是实时更新数据，加上lazy，从输入框失去焦点，按下enter都会更新数据。
  2. number：默认是string类型，使用number复制为number类型。
  3. trim：用于自动过滤用户输入的首尾空白字符
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
              <input type="text" v-model.lazy="message" />
			  <h2>{{message}}</h2>

			  <input type="text" v-model.number="age" />
			  <h2>{{age}}---{{typeof age}}</h2>

			  <input type="text" v-model.trim="name" />
			  <h2>{{name}}</h2>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						message: "zzz",
						age: 18,
						name: "ttt"
					}
				}
			})
		</script>
	</body>
</html>

 

 从以上两幅图可以看出v-model 修饰符的作用。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

Servlet

javascript

Java

v-model的使用 的相关文章

  • Java 数组的最大维数

    出于好奇 在 Java 中数组可以有多少维 爪哇language不限制维数 但是JavaVM规范将维度数限制为 255 例如 以下代码将无法编译 class Main public static void main String args

  • 在为 RXJS 可观察量编写测试时，如何避免让调度程序通过我的业务逻辑？

    我发现使某些测试通过的唯一方法是显式地将调度程序传递给函数 为了便于说明 请考虑以下函数 function doStuff stream return stream delay 100 filter x gt x 2 0 map x gt

  • 无法加载或查找主类，可以在命令行中使用，但不能在 IDE 中使用[重复]

    这个问题在这里已经有答案了 在将其标记为重复之前 请先听我说完 我正在尝试使用 gradle 导入一个 java 项目 功能齐全 适用于所有其他笔记本电脑 没有问题 我的项目 100 正常运行 适用于所有其他笔记本电脑 当我的笔记本电脑被重

  • 计算日期之间的天数差异

    在我的代码中 日期之间的差异是错误的 因为它应该是 38 天而不是 8 天 我该如何修复 package random04diferencadata import java text ParseException import java t

  • Javascript - 将值从下拉框传递到 Google Maps API

    我正在使用 Google 地图 API 为一家出租车公司创建报价表 目前 用户在 2 个文本框中输入出发点和接载点 API 会计算两点之间的距离以及行程费用 我正在尝试添加两个具有设定位置的下拉框 以便用户可以选择这些位置之一或使用文本框输

  • 是否有任何非轮询方式来检测 DOM 元素的大小或位置何时发生变化？

    很长一段时间以来 我一直在寻找一种方法来检测 DOM 元素的大小或位置何时发生变化 这可能是因为窗口调整了大小 或者因为向该元素添加了新的子元素 或者因为在该元素周围添加了新元素 或者因为 CSS 规则已更改 或者因为用户更改了浏览器的字体

  • 如何配置 WebService 返回 ArrayList 而不是 Array？

    我有一个在 jax ws 上实现的 java Web 服务 此 Web 服务返回用户的通用列表 它运行得很好 Stateless name AdminToolSessionEJB RemoteBinding jndiBinding Admi

  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr

  • 为什么java中的for-each循环中需要声明变量

    for 每个循环的通常形式是这样的 for Foo bar bars bar doThings 但如果我想保留 bar 直到循环结束 我可以not使用 foreach 循环 Foo bar null Syntax error on toke

  • IE11不监听MSFullscreenChange事件

    我正在尝试使用 Bigscreen js 在 IE11 中使用全屏 但 IE11 不监听 MS FullscreenChange 事件 document addEventListener MSFullscreenChange functio

  • 无法捕获 Spring Batch 的 ItemWriter 中的异常

    我正在编写一个 Spring Batch 流程来将数据集从一个系统迁移到另一个系统 在这种情况下 这就像使用RowMapper实现在传递给查询之前从查询构建对象ItemWriter The ItemWriter称为save我的 DAO 上的

  • 如何在 Quartz 调度程序中每 25 秒运行一次？

    我正在使用 Java 的 Quartz Scheduling API 你能帮我使用 cron 表达式每 25 秒运行一次吗 这只是一个延迟 它不必总是从第 0 秒开始 例如 序列如下 0 00 0 25 0 50 1 15 1 40 2 0

  • 单击关闭按钮后不显示 Google 一键登录 UI

    我正在尝试按照本指南使新的谷歌一键登录工作 https developers google com identity one tap web https developers google com identity one tap web

  • 如何在Java中正确删除数组[重复]

    这个问题在这里已经有答案了 我刚接触 Java 4 天 从我搜索过的教程来看 讲师们花费了大量精力来解释如何分配二维数组 例如 如下所示 Foo fooArray new Foo 2 3 但我还没有找到任何解释如何删除它们的信息 从内存的情

  • Chartjs刻度标签位置

    尝试让 Y 轴刻度标签看起来像image https i stack imgur com XgoxX png 位于秤顶部且不旋转 缩放选项当前如下所示 scales yAxes id temp scaleLabel display true

  • Java的-XX:+UseMembar参数是什么

    我在各种地方 论坛等 看到这个参数 并且常见的答案是它有助于高并发服务器 尽管如此 我还是找不到 sun 的官方文档来解释它的作用 另外 它是Java 6中添加的还是Java 5中存在的 顺便说一句 许多热点虚拟机参数的好地方是这一页 ht

  • 如何获取 UIWebView 中元素的位置？

    我在 iPad 程序中加载了 html 的 UIWebView 通过使用 webkit column width 我将 html 分为几列 padding 0px height 1024px webkit column gap 0px we

  • 如何在 javascript 正则表达式中匹配平衡分隔符？

    我原以为这个问题是不可能的 据我所知 Javascript 的正则表达式既没有递归插值 也没有漂亮的 NET 平衡组功能 但问题就在那里 如问题 12 所示正则表达式 alf nu http regex alf nu 匹配平衡对 lt an

  • JAXB - 列表<可序列化>？

    我使用 xjc 制作了一些课程 public class MyType XmlElementRefs XmlElementRef name MyInnerType type JAXBElement class required false

  • 用于 C# XNA 的 Javascript（或类似）游戏脚本

    最近我准备用 XNA C 开发另一个游戏 上次我在 XNA C 中开发游戏时 遇到了必须向游戏中添加地图和可自定义数据的问题 每次我想添加新内容或更改游戏角色的某些值或其他内容时 我都必须重建整个游戏或其他内容 这可能需要相当长的时间 有没

随机推荐

热门标签