当前位置：首页 > news >正文

软件测试学习笔记丨Vue常用指令-输入绑定（v-model）

news 2026/2/9 16:13:08

本文转自测试人社区，原文链接：https://ceshiren.com/t/topic/23461

指令

指令是将一些特殊行为应用到页面DOM元素的特殊属性

格式都是以v-开始的，例如：

v-model：双向绑定
v-if和v-else：元素是否存在
v-show：元素是否显示
v-on：绑定事件
v-bind：绑定属性

v-model 双向绑定

作用：实现标签中数据的双向绑定

实质：监听元素，根据元素的不同选取不同的property抛出不同的事件

适用的表单元素： <input>、<textarea>、<select>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入vue --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body><div id="app"><!-- 定义输入框，绑定msg变量 --><input type="text" v-model="msg"><!-- 与输入框同步值，显示 msg 的值 --><h2>{{msg}}</h2></div>
</body>
</html>
<script>var vm = new Vue({el: "#app",data:{// 定义 msg 数据msg: '',}})
</script>

data

vue中的data属性专门以对象方式存放数据
vue中data的两种定义方式

<!--第一种：Object-->
<script type="text/javascript">var app = new Vue({el:"app",data:{isLogin: false}})
</script>
<!--第二种：Function-->
<script tyepe="text/javascript">var app = new Vue({el:"app",data(){return {islogin: false}}})
</script>

插值

方式一

<body><div id="app"><!-- 使用 v-html 绑定原生的html代码 --><span v-html="rawHtml"></span></div>
</body>
</html>
<script>var vm = new Vue({el: "#app",data:{// 原生 html 代码块rawHtml: '<span style="color:red">这里是红色的</span>',}})
</script>

方式二

<body><div id="app"><!-- 使用JS表达式 --><div>{{ ok ? 'Yes' : 'No' }}</div></div>
</body>
</html>
<script>var vm = new Vue({el: "#app",data:{ok: 'sdg',}})
</script>

v-model 修饰符

.lazy：用于在事件之后进行同步
.number：将用户的输入值转换为数值类型
.trim：自动过滤用户输入的首部和尾部的空白字符，即空格

<body><div id="app">事件之后进行同步:<input type="text" v-model.lazy="lazy"><h2>{{lazy}}</h2><br><!-- typeof 用来区分数据类型，这里用来显示 number 这个变量值的类型，类似于python的type()方法 -->把用户输入转换成数值类型:<input type="text" v-model.number="number"><h2>{{typeof number}}</h2>自动过滤首尾的空格:<input type="text" v-model.trim="trim"><h2>{{trim}}</h2></div>
</body>
</html>
<script>var vm = new Vue({el: "#app",data:{lazy: '',number: '',trim: ''}})
</script>

在这里插入图片描述

软件测试学习笔记丨Vue常用指令-输入绑定（v-model）

本文转自测试人社区，原文链接：https://ceshiren.com/t/topic/23461 指令指令是将一些特殊行为应用到页面DOM元素的特殊属性格式都是以v-开始的，例如： v-model：双向绑定v-if和v-else：元素是否存在v-sho…...

编程日记 2024/11/5 17:21:53

C#、C和C++的主要区别

C＃和C的区别在于：C＃代码首先会被编译为CLR（公共语言运行库），然后由.NET框架解析；它是在虚拟机上执行，会自动进行内存管理，不支持使用指针。C将会直接被编译为机器代码&am…...

编程日记 2024/11/5 17:20:51

我们来学mysql -- 连接(原理版)

我们来学mysql -- 连接题记两张表驱动表题记回到初学者的视角，navicat或命令窗口，呈现一行行数据，类比为excel工作薄更是深入人心通过join将多表的记录关联起来，这似乎也没啥问题只是好像是那么回事，又…似乎有想说…...

编程日记 2024/11/5 17:19:49

PyQt5的安装与简介

目录一、介绍二、PyQt5的安装 1、安装PyQt5 2、安装Qt的工具包三、配置Qt工具 1、配置Designer （1)、打开pycharm，找到设置选项 （2）、找到工具-->外部工具 （3）、点击号，创建外部工…...

编程日记 2024/11/5 17:18:48

100种算法【Python版】第43篇——优化算法之模拟退火算法

本文目录 1 算法说明2 算法示例：Rosenbrock函数极值3 算法应用1：复杂函数极值4 算法应用2：TSP问题1 算法说明模拟退火（Simulated Annealing, SA）算法最早由斯图尔特西尔伯特和约瑟夫斯图尔特于1983年提出，灵感来源于金属退火过程。金属在加热后会变得更加柔软，冷却时逐…...

编程日记 2024/11/5 17:17:46

初识动态规划(由浅入深)

🤓 动态规划入门与进阶指南 📘 动态规划（Dynamic Programming, DP）是一种非常经典的📐算法方法，特别适合用来解决那些有大量重复计算的问题🌀。它可以将复杂的问题拆分为小问题🧩&a…...

编程日记 2024/11/5 17:16:45

关于大模型微调与训练的问题，大模型训练的难点在哪里？

前言 “ 大模型训练的难点不在于大模型本身，而在于训练数据 ” 这两天有一个小兄弟问我关于大模型训练的问题，然后他想自己训练一个小模型，但又不知道该怎么操作；所以，今天就再来讨论一下大模型的训练问题&#xff0…...

编程日记 2024/11/5 17:15:44

如何对数据库的表字段加密解密处理？

对于表格数据的加密处理，通常涉及到对数据库中存储的数据进行加密，以保护敏感信息。 Java示例（使用AES算法加密数据库表数据） 首先，你需要一个数据库连接，这里假设你使用的是JDBC连接MySQL数据库。以下是…...

编程日记 2024/11/5 17:14:43

六、Go语言快速入门之数组和切片

文章目录数组和切片数组:one: 数组初始化:two: 数组的遍历:three: 多维数组:four: 将数组传递给函数切片(Slice):one: 切片的初始化:star: new和make区别 :two: 切片的使用:three: 将切片传递给函数:four: 多维切片:four: Bytes包:four: 切片和垃圾回收 📅 2024年…...

编程日记 2024/11/5 17:08:34

Java：数组的定义和使用（万字解析）

目录 1. 数组的概念 2. 数组的基础知识 2.1 数组的创建 \1. 基础创建格式： \2. 类似C语言的创建格式： 【错误的创建(初始化)格式】 2.2 数组的数据类型 2.3 数组的初始化 —— 两种方式 \1.动态初始化：(完全默认初始化) \2. 静态初…...

编程日记 2024/11/5 17:07:31

密码学简要介绍

密码学是研究编制密码和破译密码的技术科学，它研究密码变化的客观规律，主要包括编码学和破译学两大部分。一、定义与起源定义：密码学是研究如何隐密地传递信息的学科，在现代特别指对信息以及其传输的数学性研究，常被…...

编程日记 2024/11/5 17:06:29

2024.11月最新智能问答AI创作系统源码，GPT4.0多模态模型+AI换脸+AI智能体GPTs应用+AI绘画（Midjourney）+详细搭建部署教程

一、前言 SparkAi创作系统是一款基于ChatGPT和Midjourney开发的智能问答和绘画系统，提供一站式 AI B/C 端解决方案，AI大模型提问、AI绘画、专业版AI视频生成、文档分析、多模态识图理解、TTS & 语音识别对话、AI换脸、支持AI智能体应用（…...

编程日记 2024/11/5 17:05:28

江协科技STM32学习- P34 I2C通信外设

🚀write in front🚀 🔎大家好，我是黄桃罐头，希望你看完之后，能对你有所帮助，不足请指正！共同学习交流 🎁欢迎各位→点赞👍 收藏⭐️ 留言📝…...

编程日记 2024/11/5 17:04:27

Python 继承、多态、封装、抽象

面向对象编程（OOP）是 Python 中的一种重要编程范式，它通过类和对象来组织代码。OOP 的四个核心概念是继承（Inheritance）、多态（Polymorphism）、封装（Encapsulation）和数据…...

编程日记 2024/11/5 17:02:25

在.net下后台设置前台UEditor编辑器不可编辑

今天手下有个问：当用户填写提交后，再次显示提交页面时，该页面的UEditor编辑器需要设置成不可编辑，怎么实现？ 可以用后台调用前台js的方式实现： 例如： 前台页面： <div style&qu…...

编程日记 2024/11/5 16:59:22

Flutter CustomScrollView 效果-顶栏透明与标签栏吸顶

CustomScrollView 效果 1. 关键组件 CustomScrollView, SliverOverlapAbsorber, SliverPersistentHeader 2. 关键内容 TLDR SliverOverlapAbsorber 包住 pinned为 true 的组件可以被CustomScrollView 忽略高度。以下的全部内容的都为了阐述上面这句话。初阶 Flutter 开发知…...

编程日记 2024/11/5 16:58:20

【新手入门软件测试--该如何分辨前后端问题及如何定位日志--前后端问题分辨与日志定位查询问题】

前后端问题分辨与日志定位查询一、前端问题1. 页面无法加载2. 样式错乱3. API请求失败4. 数据格式错误5. 跨域请求问题二、后端问题6. 表单验证失败7. 数据库连接失败8. 请求超时9. 权限问题10. JavaScript运行错误三、日志查询的方法1. 查看日志文件2. 过滤关键字3. 实时查…...

编程日记 2024/11/5 16:55:16

【Java Web】DAO模式及单例模式(含代码示例)

文章目录 JDBC封装DAO模式实体类DAO接口DAO实现类数据源配置基础DAO类业务逻辑层单例模式饿汉式懒汉式 JDBC封装 JDBC（Java Database Connectivity）封装是一种将 JDBC 的基本操作和常见的数据库访问逻辑封装成易于使用的工具类或框架的方法。这样做的目…...

编程日记 2024/11/5 16:54:14

深入探讨SEO分析技巧助力网站流量提升

内容概要在当前的数字化时代，SEO分析的重要性不言而喻。它是提升网站流量的关键工具，帮助站长有效地优化网站内容和结构。通过系统的SEO分析，站长可以掌握用户搜索行为和需求，从而制定出更具针对性的内容策略。例如，…...

编程日记 2024/11/5 16:53:12

Chrome 130 版本开发者工具（DevTools）更新内容

Chrome 130 版本开发者工具（DevTools）更新内容一、网络（Network）面板更新 1. 重新定义网络过滤器网络面板获新增了一些过滤条件，这些过滤条件是根据反馈重新设计的，特定于类型的过滤条件保持不变&…...

编程日记 2024/11/5 16:52:11

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外，K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案，全安装在K8S群集中。具体可参…...

编程新知 2025/8/23 5:51:08