Vue-4、单向数据绑定与双向数据绑定

1、单向数据绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数据绑定</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root1">单向数据绑定:<input type="text" :value="name">
</div>
<hr>
<script type="text/javascript">Vue.config.productionTip = false; //阻止Vue启动时产生生产提示。//创建Vue实例new Vue({el:'#root1', //el用于指定当前Vue实例为那个容器服务,值通常为css选择器字符串。data:{  //data中用于存储数据,数据提供el所指定的容器去处理。值我们暂时先写成一个对象。name:'jack'}})
</script>
</body>
</html>

在这里插入图片描述
单向数据绑定特点是。数据发生修改,页面产生变化。

2、双向数据绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>数据绑定</title><!--引入vue--><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root1">单向数据绑定:<input type="text" :value="name"><br/><hr/>双向数据绑定:<input type="text" v-model:value="name"><!--如下代码是错误的,因为v-model只能应用在表单类元素(输入元素上)--><h2 v-model:x="name">你好啊</h2></div>
<hr>
<script type="text/javascript">Vue.config.productionTip = false; //阻止Vue启动时产生生产提示。//创建Vue实例new Vue({el:'#root1', //el用于指定当前Vue实例为那个容器服务,值通常为css选择器字符串。data:{  //data中用于存储数据,数据提供el所指定的容器去处理。值我们暂时先写成一个对象。name:'jack'}})
</script>
</body>
</html>

注意;

你好啊

为错误代码,因为v-model只能应用在表单类元素(输入元素上)

但是

你好啊

可以使用v-bind。

在这里插入图片描述
3、v-bind 和v-model简写形式

v-bind

 <h1 v-bind:x="name2" >你好啊</h1> 

简写

  <h1 :x="name2" >你好啊</h1> 

v-model

    双向数据绑定:<input type="text" v-model:value="name">

简写

双向数据绑定:<input type="text" v-model="name">

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux(ubuntu)中crontab定时器命令详解 以及windows中定时器

linux&#xff08;ubuntu&#xff09;中crontab定时器命令详解 crontab 是一个用于创建、编辑和管理用户的定时任务的命令&#xff0c;它可以让用户在指定的时间自动执行指定的命令或脚本。 基本语法 -e&#xff1a;编辑用户的 crontab 文件&#xff1b;-l&#xff1a;列出用…

【机器学习】常见算法详解第2篇:K近邻算法各种距离度量(已分享,附代码)

本系列文章md笔记&#xff08;已分享&#xff09;主要讨论机器学习算法相关知识。机器学习算法文章笔记以算法、案例为驱动的学习&#xff0c;伴随浅显易懂的数学知识&#xff0c;让大家掌握机器学习常见算法原理&#xff0c;应用Scikit-learn实现机器学习算法的应用&#xff0…

Java18:网络编程

一.对象序列化&#xff1a; 1.对象流&#xff1a; ObjectInputStream 和 ObjectOutputStream 2.作用&#xff1a; ObjectOutputSteam&#xff1a;内存中的对象-->存储中的文件&#xff0c;通过网络传输出去 ObjectInputStream:存储中的文件&#xff0c;通过网络传输出去…

【漏洞复现】ActiveMQ文件上传漏洞(CVE-2016-3088)

Nx01 产品简介 Apache ActiveMQ是Apache软件基金会所研发的开放源代码消息中间件。ActiveMQ是消息队列服务&#xff0c;是面向消息中间件&#xff08;MOM&#xff09;的最终实现&#xff0c;它为企业消息传递提供高可用、出色性能、可扩展、稳定和安全保障。 Nx02 漏洞描述 Ap…

vercel部署twikoo后评论收不到通知邮件问题解决方法

&#x1f4cc; 前言&#xff1a;本文主要是总结一下在vercel部署twikoo后收不到评论邮件通知问题的解决方法&#xff0c;本人在各种查资料无果后最终去twioo的git官方项目的issue中找到某位大佬给出的原因以及解决方案&#xff0c;故做此记录&#xff0c;希望对遇到此问题的同学…

用python实现检查一个文件夹中所有word文件内容是否重复

要检查一个文件夹中所有Word文件的内容是否重复&#xff0c;你可以使用Python的python-docx库来读取Word文件的内容&#xff0c;并使用Python的集合数据结构来检查重复项。 以下是一个示例代码&#xff0c;演示如何实现这个功能&#xff1a; python复制代码 import os from d…

重学JavaScript高级(八):ES6-ES12新增特性学习

ES6-ES12新增特性学习 ES6–对象字面量增强 属性的简写方法的简写计算属性名 let name "zhangcheng" //我想让sum作为obj的key值 let objKey "sum" let obj {//属性名的简写name//等同于name:name//方法的简写running(){}//等同于running:function()…

可视化试题(二)

1、fb5-6 关系数据具有( 关联 )性和( 分布 )性 2、fb8-4 从可视化系统设计的角度出发&#xff0c;通常需要根据系统将要完成的任务的类型选择交互技术。按照任务类型分类可以将数据可视化中的交互技术分为选择、&#xff08; 重新配置 &#xff09;、重新编码…

ERD助力研发资产沉淀研发提效

一、从痛点中思考答案 痛点一&#xff1a;复杂系统的设计和逻辑碎片化散落&#xff0c;缺少沉淀导致系统后期维护、迭代以及架构升级都非常困难。 痛点二&#xff1a;由于新需求或新项目导致的系统的老旧逻辑梳理往往耗费大量人力&#xff0c;甚至造成人才的流失。 痛点三&a…

React 入门 - 05(响应式与事件绑定)

本章内容 目录 一、响应式设计思想二、React 中的事件绑定 继上一节我们简单实现一个 TodoList来更加了解编写组件的一些细节。本节继续这个案例功能的完成。 一、响应式设计思想 1、在原生的 JS中&#xff0c;如果要实现点击”提交“按钮就将输入框的内容添加至页面列表中&…

什么是协议和什么是OSI模型,以及两者之间的关系

目录 协议 1.协议 2.OSI模型 &#xff08;1&#xff09;什么是OSI模型 &#xff08;2&#xff09;OSI模型和协议之间的关系 总结 &#xff08;3&#xff09;示意图 协议 1.协议 就是双方通过协商&#xff0c;需要共同遵守的约定 协议就是规则&#xff0c;是约定 http…

数字战场上的坚固屏障:雷池社区版(WAF)

黑客的挑战 智能语义分析算法&#xff1a; 黑客们常利用复杂技术进行攻击&#xff0c;但雷池社区版的智能语义分析算法能深入解析攻击本质&#xff0c;即使是最复杂的攻击手法也难以逃脱。 0day攻击防御&#xff1a; 传统防火墙难以防御未知攻击&#xff0c;但雷池社区版能有效…

Spark八:Spark性能优化

Spark性能调优 Spark调优的方法&#xff0c;包括RDD使用、文件读取&#xff0c;partition 学习资料&#xff1a;https://mp.weixin.qq.com/s/caCk3mM5iXy0FaXCLkDwYQ 一、Spark调优之RDD算子调优 1.1 RDD复用 在对RDD进行计算时&#xff0c;要避免相同的算子和计算逻辑下对…

【MySQL】ANY函数 的巧用(筛选字段 > ANY(语句) 和 筛选字段 < ANY(语句))

力扣题 1、题目地址 1355. 活动参与者 2、模拟表 表&#xff1a;Friends Column NameTypeidintnamevarcharactivityvarchar id 是朋友的 id&#xff0c;并且在 SQL 中&#xff0c;是该表的主键name 是朋友的名字activity 是朋友参加的活动的名字 表&#xff1a;Activiti…

从头开始构建大型语言模型

了解如何从头开始构建大型语言模型&#xff0c;从而创建、训练和调整大型语言模型&#xff01;LLMs 在“从头开始构建大型语言模型”中&#xff0c;你将了解如何从内到外LLMs工作。在这本富有洞察力的书中&#xff0c;畅销书作家塞巴斯蒂安拉施卡 &#xff08;Sebastian Raschk…

计算机科学速成课【学习笔记】(3)——布尔逻辑和逻辑门

本集课程的B站链接 3. 布尔逻辑 和 逻辑门-Boolean Logic & Logic Gates_哔哩哔哩_bilibili3. 布尔逻辑 和 逻辑门-Boolean Logic & Logic Gates是【计算机科学速成课】[40集全/精校] - Crash Course Computer Science的第3集视频&#xff0c;该合集共计40集&#xff…

当需要视频监控技术升级时,应该如何操作呢?

在当今社会&#xff0c;信息技术的飞速发展为我们提供了前所未有的安全和管理工具&#xff0c;其中视频监控系统无疑是其中一项引人注目的成果。 视频监控系统不仅提高了安全性和生产效率&#xff0c;同时也为社会的可持续发展提供了有力支持。 客户案例 工业生产管理优化 广…

复试 || 就业day13(2024.01.09)算法篇

文章目录 前言统计一致字符串的数目盒子中小球的最大数量唯一元素的和最长的美好子字符串***仅执行一次字符串交换能否使两个字符串相等 前言 &#x1f4ab;你好&#xff0c;我是辰chen&#xff0c;本文旨在准备考研复试或就业 &#x1f4ab;文章题目大多来自于 leetcode&#…

将dumpbin从Visual Studio中抠出来,并使用dumpbin查看exe和dll库的依赖关系

目录 1、初步说明 2、在开发的机器上使用dumpbin工具查看dll库的依赖关系 3、将dumpbin.exe从Visual Studio中抠出来 3.1、找到dumpbin.exe文件及其依赖的dll文件 3.2、在cmd中运行dumpbin&#xff0c;提示找不到link.exe文件 3.3、再次运行dumpbin.exe提示找不到mspdb10…

了解DC电源模块的基本参数及选择方法

BOSHIDA 了解DC电源模块的基本参数及选择方法 DC电源模块是一种用来提供稳定直流电源的设备&#xff0c;常被应用在电子产品测试、实验室设备等领域。了解DC电源模块的基本参数和选择方法有助于正确选择和使用合适的模块。 1. 输出电压范围&#xff1a;DC电源模块通常有固定的…