vue常用指令(v-mode)

一、v-mode 指令

  • 作用:

    • 获取和设置表单元素的值(实现双向数据绑定)
  • 双向数据绑定

    • 单向绑定: 就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。
    • 双向绑定: 用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定。
  • 用户更新View应用场景:

    • 示例:当用户填写表单时,View的状态就被更新了,如果此时MVVM框架可以自动更新Model的状态,那就相当于我们把Model和View做了双向绑定。

二、代码演示

1、原始单项绑定(数据修改 --> 界面显示修改)

  1. 代码

    <!DOCTYPE html>
    <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><!-- 点击数据修改,导致界面数据修改 --><input type="button" value="修改数据" @click="changeValue" /><!-- 数据显示 --><h1>{{value}}</h1></div></body><script src="js/vue.min.js"></script><script>var Vm = new Vue({el: "#app",data: {value: "测试数据",},methods: {changeValue: function () {this.value = "修改后的数据";},},});</script>
    </html>
  2. 测试结果:

    在这里插入图片描述

2、v-mode 实现数据双向绑定

  1. 修改代码

    <!DOCTYPE html>
    <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><!-- v-on 绑定事件 --><!-- <input type="button" value="v-on绑定点击事件" v-on:click="show" /> --><!-- @符号绑定 --><input type="button" value="@绑定点击事件" @click="show2" /></div></body><script src="js/vue.min.js"></script><script>var Vm = new Vue({el: "#app",data: {testValue: "hello",},//methods专门存放Vue的方法methods: {show: function () {alert("v-on绑定点击事件");},show2: function () {alert("@绑定点击事件");},},});</script>
    </html>
  2. 测试结果

在这里插入图片描述

可以看到,输入框内容改变会导致显示文本内容改变,数据流:文本改变 --> model的数据改变 --> 显示的model数据改变

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

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

相关文章

蓝牙----蓝牙消息传输_GATT服务发现

蓝牙消息传输_GATT服务发现 1.主机和从机GATT服务的发现2.通知的使用 1.主机和从机GATT服务的发现 GATT服务的发现由主机执行&#xff0c;一共三个阶段  1.处理交换 MTU 请求和响应&#xff0c;启动对 Simple Service 服务的发现。 if (discState BLE_DISC_STATE_MTU){// MT…

​ PaddleHub 首页图像 - 文字识别chinese_ocr_db_crnn_server​

PaddleHub 便捷地获取PaddlePaddle生态下的预训练模型&#xff0c;完成模型的管理和一键预测。配合使用Fine-tune API&#xff0c;可以基于大规模预训练模型快速完成迁移学习&#xff0c;让预训练模型能更好地服务于用户特定场景的应用 零基础快速开始WindowsLinuxMac Paddle…

【更新】ESG-71个工具变量汇总(2024)

一、引言 收集了CSSCI期刊文本数据&#xff0c;并对“ESG”相关期刊进行文本分析&#xff0c;统计了71个“ESG”相关的工具变量&#xff0c;希望对大家提升研究效率有所帮助 工具变量是一种在统计学和计量经济学中常用的技术&#xff0c;用于处理因果关系研究中的内生性问题。…

452. 用最少数量的箭引爆气球 - 力扣(LeetCode)

题目描述 有一些球形气球贴在一堵用 XY 平面表示的墙面上。墙面上的气球记录在整数数组 points &#xff0c;其中points[i] [xstart, xend] 表示水平直径在 xstart 和 xend之间的气球。你不知道气球的确切 y 坐标。 一支弓箭可以沿着 x 轴从不同点 完全垂直 地射出。在坐标 …

带大家做一个,易上手的家常麻辣孜然牛蹄筋

首先 我们从冰箱中拿出牛蹄筋 泡水化开 一根大葱 一块生姜 大葱切段 生姜块 一把花椒 七个左右干辣椒 五个左右大料 三瓣蒜 切成蒜片 放入小碗中单独装起来 两个绿辣椒 首选螺丝椒 垃圾切成片 单独装起来 先将牛蹄筋 倒入锅中 然后加水 将牛蹄筋全部泡住即可 然后起锅烧…

RT-Thread: STM32 SPI使用流程

1.添加驱动 ①点开设置界面 ②勾选看门 SPI 驱动 ③点击保存 ④查看添加的驱动文件 drv_spi.c 2.打开驱动头文件定义 ①打开配置文件 ②打开定义 3.打开需要开启的SPI总线 打开 drivers 目录下的 board.h 用SPI搜索&#xff0c;找到如下文字&#xff0c;打开对应的宏。 /*-…

巴厘行记(四)——乌布漫游

欢迎览阅《巴厘行记》系列文章 巴厘行记巴厘行记&#xff08;一&#xff09;——海神庙 巴厘行记&#xff08;二&#xff09;——乌布之夜 巴厘行记&#xff08;三&#xff09;——Auntie和Mudi 巴厘行记&#xff08;四&#xff09;——乌布漫游 巴厘行记&#xff08;五&a…

Pytest单元测试框架

第一章、pytest概述 Pytest is a framework that makes building simple and scalable tests easy. Tests are expressive and readable—no boilerplate code required. Get started in minutes with a small unit test or complex functional test for your application or l…

深入理解与防范C语言中的栈溢出问题

一、引言 栈溢出是计算机安全领域中一个常见的漏洞&#xff0c;特别是在C语言编程中。由于C语言的灵活性和对内存管理的直接操作性&#xff0c;如果程序员在编写代码时不注意&#xff0c;就可能导致栈溢出的发生。本文将全面解析栈溢出的概念、原因、影响以及防范措施。 二、…

springboot+vue3支付宝接口案例-第二节-准备后端数据接口

springbootvue3支付宝接口案例-第二节-准备后端数据接口&#xff01;今天经过2个小时的折腾。准备好了我们这次测试支付宝线上支付接口的后端业务数据接口。下面为大家分享一下&#xff0c;期间发生遇到了一些弯路。 首先&#xff0c;我们本次后端接口使用的持久层框架是JPA。这…

3d合并模型是重名材质---模大狮模型网

当合并3d模型时&#xff0c;如果存在重名的材质&#xff0c;可能会导致加载问题。这是因为3D软件在处理重名材质时可能会出现冲突。你可以尝试以下方法解决这个问题&#xff1a; 重命名材质&#xff1a;检查合并的模型中的材质&#xff0c;确保它们具有唯一的命名。修改重名的材…

Pyroch中transforms 图像增强发方法的应用

1 应用场景 在我们训练模型的时候&#xff0c;有的时候数据不够&#xff0c;就需要通过水平翻转、垂直翻转、镜像、旋转、改变亮度、标准化等方式增加图像的多样性&#xff0c;此时可以调用Pytorch 中的Transforms完成这些操作 2 导入相应的库 from torchvision import tran…

多场景建模:美团HiNet

HiNet: Novel Multi-Scenario & Multi-Task Learning with Hierarchical Information Extraction 背景&#xff1a; 美团的多场景多任务&#xff08;ctr、ctcvr&#xff09; 解决方案 通过分层来分别学习多场景多任务 方案详情 点评&#xff1a;在底层Embedding时用…

如何实现Win系统ssh连接Ubuntu使用vscode远程敲代码

最近&#xff0c;我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念&#xff0c;而且内容风趣幽默。我觉得它对大家可能会有所帮助&#xff0c;所以我在此分享。点击这里跳转到网站。 文章目录 前言1、安装OpenSSH2、vscode配置ssh3. 局域网测试连接…

opencv#35 连通域分析

连通域分割原理 像素领域介绍: 4邻域是指中心的像素与它邻近的上下左右一共有4个像素&#xff0c;那么称这4个像素为中心像素的4邻域。 8邻域是以中心像素周围的8个像素分别是上下左右和对角线上的4个像素。 连通域的定义(分割)分为两种:以4邻域为相邻判定条件的连通域分割和…

让AI帮你说话--GPT-SoVITS教程

有时候我们在录制视频的时候&#xff0c;由于周边环境嘈杂或者录音设备问题需要后期配音&#xff0c;这样就比较麻烦。一个比较直观的想法就是能不能将写好的视频脚本直接转换成我们的声音&#xff0c;让AI帮我们完成配音呢&#xff1f;在语音合成领域已经有很多这类工作了&…

1.Mybatis入门

目录 前言 1入门 1.1 入门程序实现 1.2 数据准备 ​编辑 1.3 配置Mybatis 1.4 编写SQL语句 1.5 单元测试 1.6 解决SQL警告与提示 2. JDBC介绍(了解) 2.1 介绍 2.2 代码 2.3 问题分析 2.4 技术对比 3. 数据库连接池 3.1 介绍 3.2 产品 4. lombok 4.1 介绍 4.…

AOP+Redisson 延时队列,实现缓存延时双删策略

一、缓存延时双删 关于缓存和数据库中的数据保持一致有很多种方案&#xff0c;但不管是单独在修改数据库之前&#xff0c;还是之后去删除缓存都会有一定的风险导致数据不一致。而延迟双删是一种相对简单并且收益比较高的实现最终一致性的方式&#xff0c;即在删除缓存之后&…

哪些 3D 建模软件值得推荐?

云端地球是一款免费的在线实景三维建模软件&#xff0c;不需要复杂的技巧&#xff0c;只要需要手机&#xff0c;多拍几张照片&#xff0c;就可以得到完整的三维模型&#xff01; 无论是大场景倾斜摄影测量还是小场景、小物体建模&#xff0c;都可以通过云端地球将二维数据向三…

【JLU】校园网linux客户端运行方法

终于给这输入法整好了&#xff0c;就像上面图里那样执行命令就行 写一个开机自启的脚本会更方便&#xff0c;每次都运行也挺烦的 补充了一键运行脚本&#xff0c;文件路径需要自己修改 #!/bin/bashrun_per_prog"sudo /home/d0/ubuntu-drclient-64/DrClient/privillege.s…