vue数据双向绑定

news2024/12/23 2:40:06

5.Vue数据双向绑定

5.1.什么是双向数据绑定

Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

5.2 怎么实现双向数据绑定

v-model
v-model 指令可以在表单及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值!

测试案例：

用非v-model方式的时候，是不能双向绑定的

		
	<div id="app">     
        <input type="text"  :value="msg"  />
        <div>{{msg}}</div>
    </div>
    
	 <script>
	     var app = new Vue({
	         el:'#app',
	         data:{
	            msg:"hello"
	         }
	     });
	 </script>

在这里插入图片描述

改为v-model方式绑定：

<div id="app">     
        <input type="text"  v-model="msg"  />
        <div>{{msg}}</div>
    </div>
    
	 <script>
	     var app = new Vue({
	         el:'#app',
	         data:{
	            msg:"hello"
	         }
	     });
	 </script>

在这里插入图片描述

案例2：

   <div id="app">
        <select v-model="selected">
            <option value="">--请选择--</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="武汉">武汉</option>
        </select>
        <p>{{selected}}</p>
    </div>
     <script>
         var v= new Vue({
             el:"#app",
             data:{selected:'' }
         });
     </script>

在这里插入图片描述

案例3：

   <div id="app">
        <input type="checkbox" id="jack" value="吃饭" v-model="checkedValues">
        <label for="jack">吃饭</label>
        <input type="checkbox" id="john" value="睡觉" v-model="checkedValues">
        <label for="john">睡觉</label>
        <input type="checkbox" id="mike" value="打豆豆" v-model="checkedValues">
        <label for="mike">打豆豆</label>

        <div>选中的值: </div>
        <ul>
          <li v-for="item in checkedValues" >{{item}}</li>
        </ul>    
    </div>
    
    <script type="text/javascript">
    var v = new Vue({
        el: '#app',
        data: {
            checkedValues:[]
        }
    });
    </script>

在这里插入图片描述

6.Vue事件绑定

v-on
  v-on:事件名 = “方法名”
  简写方式： @事件名 = “方法名”
  事件名有哪些： click|keydown|keyup|mouseover|mouseout|自定义事件名

测试案例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		
		<div id="app">
			
			<input type="button" value="-"  v-on:click="sub" />
			<input type="text" v-model="num" />
			<input type="button" value="+" @click="plus" />
			
			
		</div>
		
		<script>
			
			var v=new Vue({
				
				el:"#app",
				data:{
					num:1
				},
				methods:{
					sub:function(){
						if(this.num>0)
						  this.num-=1;
					},
					plus:function(){
						this.num=parseInt(this.num)+1; 
					}
				}
				
			})
			
		</script>
		
	</body>
</html>

在这里插入图片描述

在这里插入图片描述

v-on： 可以简化为@

<div id="app">
	<input type="button" value="-" @click="sub" />
	<input type="text"  v-model="count" />
	<input type="button" value="+" @click="plus" />
</div>

测试案例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		
		输入分数，按回车，显示等级
		
		<div id="app">
			
			<div>等级:{{level}}</div>
			
			<input type="text"  v-on:keyup.enter="show" v-model="score" />
			
		</div>
		
		
		 <script type="text/javascript">
	        var app = new Vue({
	            el: '#app',
	            data: {
	                level: '',
	                score:''
	            },
	            methods: {
	               
	                show: function () {
	                  if(this.score>=0 && this.score<60)
	                      this.level="D";
	                  else if(this.score<80)
	                      this.level="C";   
	                  else if(this.score<90)
	                      this.level="B";
	                  else
	                      this.level="A";
	                }
	            }
	
	        })
        </script>
		
		
	</body>
</html>

测试结果：

在这里插入图片描述

7.综合案例

根据前面学习的vue的基础语法和事件绑定，实现一下商品的查询，添加，删除功能。

测试案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div style="text-align: center;" >
            <div >
                <h3 >商品操作页面</h3>
            </div>
		 <div  style="text-align:center">
		                 序号：<input type="text"  v-model="id"/>
		                 名称：<input type="text"  v-model="name"/>
		                 价格：<input type="text"  v-model="price"/>
		      <input type="button" value="添加" @click="add()"/><br/>
		                   搜索：<input type="text" v-model="searchKey"/>
                
            </div>
        </div>
        <table style="width: 800px; margin-left: auto; margin-right: auto;" border="1">
            <header>
                <tr>
                    <td>序号</td>
                    <td>名称</td>
                    <td>价格</td>
                    <td>操作</td>
                </tr>
            </header>
        <tbody>
            <tr v-for="item in search(searchKey)" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.price }}</td>
                <!-- .prevent阻止事件的默认行为，这里是阻止超链接默认的跳转功能-->
                <td><a href="" @click.prevent="del(item.id)">删除</a></td>
            </tr>
        </tbody>
      </table>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el : "#app",
            data:{
                id:'',
                name:'',
                searchKey:'',
                list:[
                    {id:1,name:'T恤',price:100},
                    {id:2,name:'西装',price:500},
                    {id:3,name:'连衣裙',price:200},
                    {id:4,name:'衬衫',price:150}
                ]
            },
            methods:{
                add(){
                	//将表单中的数据组装为一个商品对象
                    var good = {
                            id:this.id,
                            name:this.name,
                            price:this.price
                        };
                    //存入list中
                    this.list.push(good);
                    //将表单数据清空
                    this.id = this.name = this.price='';
                },
                del(id){
                	//遍历查询
                    var index = this.list.findIndex( item => {
                        if(id == item.id){
                            return true;
                        }
                    });
                    this.list.splice(index,1);//JavaScript中的splice(index,i)方法：从已知数组的index下标开始，删除i个元素
                },
                search(searchKey){
                	//filter() 方法创建一个新的数组，新数组中的元素是数组中符合条件的所有元素组合而成
                    return this.list.filter(item => {
                        if(item.name.includes(searchKey)){
                            return item;
                        }
                    });
                }
            }
        })
    </script>
</body>
</html>

测试结果：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

8.Template 标签

template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上

比如：

<div v-for="value in user">{{value}}</div>

这个循环是做在div上面的，如果需要循环的内容很多，比如span标签也要做这个循环

<div v-for="value in user">{{value}}</div>
<span v-for="value in user">{{value}}</span>

则需要把循环提出来,但这样会多一个div标签

<div v-for="value in user">
    <div>{{value}}</div>
    <span>{{value}}</span>
</div>

如果不想多一个标签，可以用template，template不会渲染到页面上

<template v-for="value in user">
    <div>{{value}}</div>
    <span>{{value}}</span>
</template>

另外，template可以用到制作模板。

方法1：直接在vue对象中定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
   <!--这里会显示template里的内容-->
	<div id="app">
	   
	</div>
	
	<script>
	    var  v = new Vue({
	        el:"#app",
	        data:{
	            msg:"daimenglaoshi"
	        },
	        template:"<div>{{msg}}</div>"//模板中只能有一个根元素
	    });
	</script>
	</body>
</html>

方法2：写在template标签里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		
		
	<!--这里会显示template标签里的内容-->
	<div id="app"></div>
	
	<!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
	<template id="temp">
	    <div>{{msg}}<div>	  
	</template>
	
	<script>
	    let vm = new Vue({
	        el:"#app",
	        data:{
	            msg:"daimenglaoshi"
	        },
	        //通过该属性可以将自定义的template属性中的内容全部替换app的内容，并且会覆盖里面原有的内容，并且在查看dom结构时没有template标签
	        template:"#temp"
	      
	    });
	</script>		
	</body>
</html>

方法3：写在script标签里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>

	<div id="app"></div>
	
	<script type="x-template" id="temp">
       <div>{{msg}}</div>
   </script>
	
	<script>
	    var  v = new Vue({
	        el:"#app",
	        data:{
	            msg:"daimenglaoshi"
	        },
	        template:"#temp"//模板中只能有一个根元素
	    });
	</script>
	</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/95859.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[ MessAuto ]: 短信验证码自动填充，理论支持所有浏览器或 APP， Only For Mac

[ MessAuto ]: 短信验证码自动填充，理论支持所有浏览器或 APP， Only For Mac

MessAuto 开源地址&#xff1a;https://github.com/LeeeSe/MessAuto MessAuto 是一款 macOS 平台 自动提取 短信验证码并 粘贴回车 的软件&#xff0c;百分百由Rust开发&#xff0c;适用于任何APP。 特点&#xff1a; 轻量&#xff1a;程序占用存储 1.8 M&#xff0c;占用内…
阅读更多...
NLP学习笔记(三) GRU基本介绍

NLP学习笔记(三) GRU基本介绍

大家好&#xff0c;我是半虹&#xff0c;这篇文章来讲门控循环单元 (Gated Recurrent Unit, GRU) 文章行文思路如下&#xff1a; 首先通过长短期记忆网络引出为什么需要门控循环单元然后介绍门控循环单元的核心思想与运作方式最后通过简洁的代码深入理解门控循环单元的运作方…
阅读更多...
奇舞周刊 476 期：代码在内存中的 “形状”

奇舞周刊 476 期：代码在内存中的 “形状”

记得点击文章末尾的“ 阅读原文 ”查看哟~下面先一起看下本期周刊 摘要 吧~奇舞推荐■ ■ ■代码在内存中的 “形状”众所周知&#xff0c;js 的基本数据类型有 number、string、boolean、null、undefined 等。那么问题来了 typeof null 和 typeof undefined 分别是什么呢&…
阅读更多...
[附源码]Node.js计算机毕业设计果蔬预约种植管理系统Express

[附源码]Node.js计算机毕业设计果蔬预约种植管理系统Express

项目运行 环境配置&#xff1a; Node.js最新版 Vscode Mysql5.7 HBuilderXNavicat11Vue。 项目技术&#xff1a; Express框架 Node.js Vue 等等组成&#xff0c;B/S模式 Vscode管理前后端分离等等。 环境需要 1.运行环境&#xff1a;最好是Nodejs最新版&#xff0c;我…
阅读更多...
[内网渗透]—NTLM网络认证及NTLM-Relay攻击

[内网渗透]—NTLM网络认证及NTLM-Relay攻击

NTML网络认证 Windows认证分为本地认证和网络认证，当我们开机登录用户账户时，就需要将lsass.exe进程转换的明文密码hash与 sam文件进行比对，这种方式即为——本地认证 而当我们访问同一局域网的一台主机上的SMB共享时，需要提供凭证通过验证才能访问，这个过程就会设计win…
阅读更多...
【C++】list 的模拟实现

【C++】list 的模拟实现

​&#x1f320; 作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《吃透西嘎嘎》 &#x1f387; 座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录&#x1f449;前言&…
阅读更多...
Halcon条码和二维码质量评级

Halcon条码和二维码质量评级

现在各行各业的人们都使用条码/二维码从生产阶段到销售点全程追踪他们 的产品。那么怎么验证生产出来的具有可读性&#xff0c;码的质量等级如何呢&#xff1f; 其实ISO行业标准已经给出了如何评估码的质量等级的标准&#xff0c;以下三种主要验证标准用于确定一维条码、二维码…
阅读更多...
毕业设计 - 基于Java EE平台项目管理系统的设计与实现【源码+论文】

毕业设计 - 基于Java EE平台项目管理系统的设计与实现【源码+论文】

文章目录前言一、项目设计1. 模块设计2. 实现效果二、部分源码项目工程前言 今天学长向大家分享一个 java web项目: 基于Java EE平台项目管理系统的设计与实现 一、项目设计 1. 模块设计 从管理员角度看: 用户登入系统后&#xff0c;可以修改管理员的密码。同时具有以下功能…
阅读更多...
最全的SpringMVC教程，终于让我找到了

最全的SpringMVC教程，终于让我找到了

1. 为啥要学 SpringMVC&#xff1f; 1.1 SpringMVC 简介 在学习 SpringMVC 之前我们先看看在使用 Servlet 的时候我们是如何处理用户请求的&#xff1a; 配置web.xml <?xml version"1.0" encoding"UTF-8"?> <web-app xmlns"http://xmln…
阅读更多...
[附源码]Python计算机毕业设计国际美容会所管理系统Django（程序+LW）

[附源码]Python计算机毕业设计国际美容会所管理系统Django（程序+LW）

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等…
阅读更多...
Jetpack Compose中的动画

Jetpack Compose中的动画

Jetpack Compose中没有沿用Android原有的View动画和属性动画&#xff0c;而是新创建了一套全新的动画系统API&#xff0c;这是理所当然的&#xff0c;因为旧的动画系统主要是基于View体系的&#xff0c;而Compose中需要针对的是Composable可组合函数进行处理&#xff0c;那么势…
阅读更多...
他文献查到凌晨两点，我用Python十分钟搞定！

他文献查到凌晨两点，我用Python十分钟搞定！

大家好&#xff0c;我是爱学习的王饱饱。 对于应届毕业生来说&#xff0c;今年一定是难熬的一年。本来找工作、写论文就已经是两座大山了&#xff0c;还要面临论文无指导的额外压力。 这让我想到了去年毕业的表弟&#xff0c;当时他为了完成论文&#xff0c;摔烂了三个鼠标。…
阅读更多...
Jsp服装商城包安装调试

Jsp服装商城包安装调试

(https://img-blog.csdnimg.cn/78351365dac24f6185cb69ee3a804ba1.png)jsp mysql新季服装商城 功能&#xff1a;前台会员中心后台 前台&#xff1a; 1.服装展示 图文列表 新闻列表 详情 2.注册登录 管理登陆 3.加入购物车 会员中心&#xff1a; 1.个人账户 查看 修改个人…
阅读更多...
一个新的React项目我们该如何配置

一个新的React项目我们该如何配置

最近组长让我负责一个新的项目&#xff0c;项目的技术栈是React typescript redux and design&#xff0c;一个工龄1年的小白菜只能先去github找开源项目看看他们做了哪些配置&#xff0c;然后去百度这些配置改如何安装。下面就是我记录一个新的React项目配置的过程。 安装…
阅读更多...
知识图谱有哪些应用领域？

知识图谱有哪些应用领域？

知识图谱通常应用于自然语言处理和人工智能领域&#xff0c;常用于提高机器学习模型的准确性和效率。它还可以用于数据挖掘、信息检索、问答系统和语义搜索等领域。近年来知识图谱在电子商务、金融、公安、医疗等行业逐步开始落地&#xff0c;在这些行业的渗透、深入中&#xf…
阅读更多...
部门还有谁在？ 已经没几个人了～

部门还有谁在？ 已经没几个人了～

正文大家好&#xff0c;我是bug菌&#xff5e;终于熬过了阳性的第三天&#xff0c;症状相对没之前那么痛苦了&#xff0c;打算要家里面的兄弟帮忙处理点事情&#xff0c;一个电话打过去&#xff0c;没想到整个部门都没几个人了&#xff0c;病毒的毒性是减弱了&#xff0c;这传染…
阅读更多...
Linux进程概念（一）

Linux进程概念（一）

Linux进程概念冯诺依曼体系结构操作系统操作系统是什么操作系统与硬件的关系操作系统如何管理硬件数据操作系统与软件的关系操作系统的安全操作系统的服务系统调用和库函数概念进程的基本概念什么是进程如何查看进程进程常见的调用冯诺依曼体系结构 常见的计算机&#xff08;台…
阅读更多...
牛客题霸sql入门篇之条件查询(三)

牛客题霸sql入门篇之条件查询(三)

牛客题霸sql入门篇之条件查询(三) 3 高级操作符 3.1 高级操作符练习(1) 3.1.1 题目内容 3.1.2 示例代码 SELECT device_id,gender,age,university,gpa FROM user_profile WHERE gendermale AND gpa>3.53.1.3 运行结果 3.1.4 考察知识点 AND关键字表示会筛选出符合左右两…
阅读更多...
java DDD领域分层架构设计思想

java DDD领域分层架构设计思想

1为什么要分层 高内聚&#xff1a;分层的设计可以简化系统设计&#xff0c;让不同的层专注做某一模块的事低耦合&#xff1a;层与层之间通过接口或API来交互&#xff0c;依赖方不用知道被依赖方的细节复用&#xff1a;分层之后可以做到很高的复用扩展性&#xff1a;分层架构可…
阅读更多...
正则表达式总结

正则表达式总结

React15前的渲染方式 React15以前&#xff0c;React是用全量渲染的方式进行页面渲染&#xff0c;每次更新都需要整个页面重新渲染。全量当数据量大的时候&#xff0c;页面就会掉帧卡顿。 为什么需要React Fiber 为了解决上述React15带来的卡顿问题&#xff0c;我们不能让一个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023