Vue 03 数据绑定

Vue中有2种数据绑定的方式:

1.单向绑定(v-bind):

数据只能从data流向页面。

2.双向绑定(v-model):

数据不仅能从data流向页面,还可以从页面流向data。
备注:
1.双向绑定一般都应用在表单类元素上(如:input、select等)
2.v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>数据绑定</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- Vue中有2种数据绑定的方式:1.单向绑定(v-bind):数据只能从data流向页面。2.双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。备注:1.双向绑定一般都应用在表单类元素上(如:input、select等)2.v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。--><!-- 准备好一个容器--><div id="root"><!-- 普通写法 --><!-- 单向数据绑定:<input type="text" v-bind:value="name"><br/>双向数据绑定:<input type="text" v-model:value="name"><br/> --><!-- 简写 -->单向数据绑定:<input type="text" :value="name"><br/>双向数据绑定:<input type="text" v-model="name"><br/><!-- 如下代码是错误的,因为v-model只能应用在表单类元素(输入类元素)上 --><!-- <h2 v-model:x="name">你好啊</h2> --></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。new Vue({el:'#root',data:{name:'123'}})</script>
</html>

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

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

相关文章

1、RocketMQ概述

第1章 RocketMQ概述 一、MQ概述 1、MQ简介 MQ&#xff0c;Message Queue&#xff0c;是一种提供消息队列服务的中间件&#xff0c;也称为消息中间件&#xff0c;是一套提供了消息生 产、存储、消费全过程API的软件系统。消息即数据。一般消息的体量不会很大。 2、MQ用途 从网上…

Java低代码:jvs-list (子列表)表单回显及触发逻辑引擎配置说明

一、子列表【新增】表单默认回显主列表关联字段 子列表新增表单可使用表单回显配置&#xff0c;在新增表单中默认回显&#xff0c;如图效果 1、子列表中进入新增页面配置 2、切换到表单设置&#xff0c;选择回显设置&#xff0c;进入回显逻辑引擎。 3、在画布中拖入【对象变量…

接入网技术

接入网 接入网是指骨干网络到用户或企业之间的所有设备。其长度一般为几百米到几公里,因而形象地被称为“最后一公里”。接入网地接入方式包括铜线(普通电话线)接入、基于双绞线的ADSL技术、基于HFC网(光纤和同轴电缆(有线电视电缆)混合网)的Cable Modem技术、光纤接入…

【Vue】浏览器自定义格式化工具

当我们不启用浏览器自定义格式化工具&#xff0c;输出 Ref 或者 Reactive 类的值出输出完整的返回值对象&#xff0c;而且 value 值需要再次点击才可以得到。 为了解决这个问题&#xff0c;我们可以开启浏览器自定义格式化工具。 点击 setting 齿轮 依次找到 preference ->…

一对多映射处理

8.3.1 、collection /** * 根据部门id查新部门以及部门中的员工信息 * param did * return */ Dept getDeptEmpByDid(Param("did") int did);<resultMap id"deptEmpMap" type"Dept"> <id property"did" column"did&quo…

华为云云耀云服务器L实例评测|云耀云服务器L实例部署odoo开源ERP平台

华为云云耀云服务器L实例评测&#xff5c;云耀云服务器L实例部署odoo开源ERP平台 一、云耀云服务器L实例介绍1.1 云耀云服务器L实例简介1.2 云耀云服务器L实例使用场景1.3 云耀云服务器L实例特点 二、odoo介绍2.1 odoo简介2.2 odoo特点 三、本次实践介绍3.1 本次实践简介3.2 本…

科技云报道:青云科技打出“AI算力牌”,抢跑“云+AI”新增市场

科技云报道原创。 近三年&#xff0c;中国云计算市场在多个维度同时发生着剧烈变化——疫情极大加速了全社会对于数字化的认知和接受程度&#xff1b;一系列云原生技术依托着开源和蓬勃的市场而迅速发展演变&#xff0c;更多产品和技术名词同时涌向市场&#xff1b;国际关系复…

用python代码写中秋电影动画送对象

好&#xff0c;中秋节快到了&#xff0c;那我们就写个代码送对象吧&#xff01; 目录 基础代码 添加月兔和月饼 加上颜色 添加动作 添加兔子动作 成品 基础代码 直接上print时间复杂度杠杠的&#xff1a; import timedef send_mid_autumn_movie_to_girlfriend():pri…

字符流的使用(FileReader)

1、文件字符输入流&#xff1a;一次读取一个字符 1.1、字节流读取中文输出可能会存在什么问题&#xff1f; 会乱码。或者内存溢出。 1.2、读取中文输出&#xff0c;哪个流更合适&#xff0c;为什么&#xff1f; 字符流 更合适&#xff0c;最小单位是按照单个字符读取的。 packa…

http客户端Feign使用

一、RestTemplate方式调用存在的问题 先来看我们以前利用RestTemplate发起远程调用的代码&#xff1a; String url "http://userservice/user/" order.getUserId(); User user restTemplate.getForObject(url, User.class);存在下面的问题&#xff1a; 代码可读…

spring_javaConfig实现配置

现在我们尝试不使用Spring的XML文件来配置了&#xff0c;全权交给Java来做 1 编写pojo类 这个类要被Spring接管&#xff0c;要被注册到容器中 添加Component注解通过Value注解来为属性注入值 package com.wq.pojo;import org.springframework.beans.factory.annotation.Value…

怒刷LeetCode的第1天(Java版)

目录 第一题 题目来源 题目内容 解决方法 方法一&#xff1a;暴力枚举 方法二&#xff1a;哈希表 第二题 题目来源 题目内容 解决方法 方法一&#xff1a;动态规划 第三题 题目来源 题目内容 解决方法 方法一&#xff1a;模拟 第一题 题目来源 两数之和 - 力…

Python实现查询一个文件中的pdf文件中的关键字

要求&#xff0c;查询一个文件中的pdf文件中的关键字&#xff0c;输出关键字所在PDF文件的文件名及对应的页数。 import os import PyPDF2def search_pdf_files(folder_path, keywords):# 初始化结果字典&#xff0c;以关键字为键&#xff0c;值为包含关键字的页面和文件名列表…

一篇文章教你Pytest快速入门和基础讲解,一定要看!

前言 目前有两种纯测试的测试框架&#xff0c;pytest和unittestunittest应该是广为人知&#xff0c;而且也是老框架了&#xff0c;很多人都用来做自动化&#xff0c;无论是UI还是接口pytest是基于unittest开发的另一款更高级更好用的单元测试框架出去面试也好&#xff0c;跟别…

【漏洞复现】泛微e-office OfficeServer2.php 存在任意文件读取漏洞复现

文章目录 前言声明一、漏洞描述二、漏洞分析三、漏洞复现四、修复建议前言 泛微e-office OfficeServer2.php 存在任意文件读取漏洞,攻击者可通过构造特定Payload获取敏感数据信息。 声明 请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造…

数据结构_复杂度讲解(附带例题详解)

文章目录 前言什么是数据结构&#xff1f;什么是算法&#xff1f;一. 算法的时间复杂度和空间复杂度1.1 算法效率1.2 如何衡量一个算法好坏 二. 时间复杂度2.1 时间复杂度概念例题一例题一分析 实例一实例一分析 三. 空间复杂度实例实例问题解析 四. 常见复杂度对比五. 常见时间…

netty server端启动源码阅读分析

服务端的启动通过ServerBootstrap类来完成&#xff0c;ServerBootstrap内有以下主要属性 ServerBootstrap extends AbstractBootstrap {//处理channel连接事件的线程组EventLoopGroup group;//处理channel其它事件的线程组EventLoopGroup childGroup;//创建channel的工厂类Cha…

MySQL 创建用户,修改用户,授权,删除用户等操作命令

MySQL 创建用户&#xff0c;修改用户&#xff0c;授权&#xff0c;删除用户等操作命令 MySQL 数据库创建用户并授权 # 创建 gogs 用户并初始化密码 create user gogs127.0.0.1 IDENTIFIED WITH mysql_native_password by IjaGoGsNl2; # 授权 grant SELECT, INSERT, UPDATE, D…

基于Yolov8的野外烟雾检测(3):动态蛇形卷积(Dynamic Snake Convolution),实现暴力涨点 | ICCV2023

目录 1.Yolov8介绍 2.野外火灾烟雾数据集介绍 3.Dynamic Snake Convolution 3.1 Dynamic Snake Convolution加入到yolov8 4.训练结果分析 5.系列篇 1.Yolov8介绍 Ultralytics YOLOv8是Ultralytics公司开发的YOLO目标检测和图像分割模型的最新版本。YOLOv8是一种尖端的、最…