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

本文转自测试人社区,原文链接: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>

在这里插入图片描述

推荐学习

【霍格沃兹测试开发】7天软件测试快速入门带你从零基础/转行/小白/就业/测试用例设计实战

【霍格沃兹测试开发】最新版!Web 自动化测试从入门到精通/ 电子商务产品实战/Selenium (上集)

【霍格沃兹测试开发】最新版!Web 自动化测试从入门到精通/ 电子商务产品实战/Selenium (下集)

【霍格沃兹测试开发】明星讲师精心打造最新Python 教程软件测试开发从业者必学(上集)

【霍格沃兹测试开发】明星讲师精心打造最新Python 教程软件测试开发从业者必学(下集)

【霍格沃兹测试开发】精品课合集/ 自动化测试/ 性能测试/ 精准测试/ 测试左移/ 测试右移/ 人工智能测试

【霍格沃兹测试开发】腾讯/ 百度/ 阿里/ 字节测试专家技术沙龙分享合集/ 精准化测试/ 流量回放/Diff

【霍格沃兹测试开发】Pytest 用例结构/ 编写规范 / 免费分享

【霍格沃兹测试开发】JMeter 实时性能监控平台/ 数据分析展示系统Grafana/Docker 安装

【霍格沃兹测试开发】接口自动化测试的场景有哪些?为什么要做接口自动化测试?如何一键生成测试报告?

【霍格沃兹测试开发】面试技巧指导/ 测试开发能力评级/1V1 模拟面试实战/ 冲刺年薪百万!

【霍格沃兹测试开发】腾讯软件测试能力评级标准/ 要评级表格的联系我

【霍格沃兹测试开发】Pytest 与Allure2 一键生成测试报告/ 测试用例断言/ 数据驱动/ 参数化

【霍格沃兹测试开发】App 功能测试实战快速入门/adb 常用命令/adb 压力测试

【霍格沃兹测试开发】阿里/ 百度/ 腾讯/ 滴滴/ 字节/ 一线大厂面试真题讲解,卷完拿高薪Offer !

【霍格沃兹测试开发】App自动化测试零基础快速入门/Appium/自动化用例录制/参数配置

【霍格沃兹测试开发】如何用Postman 做接口测试,从入门到实战/ 接口抓包(最新最全教程)

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

关于“浏览器”上不了网的问题

一、起因 小编的笔记本电脑浏览器又坏了&#xff0c;所有浏览器都上不了网&#xff1f;&#xff1f;&#xff1f;&#xff08;当然了WIFI已连接&#xff09; 但是微信可以正常发消息 因为上次也有过&#xff0c;这次又出现了&#xff0c;所以小编写篇文章记录一下解决方法 二…

自动化神器:如何用Markdown写自动化用例!

01 什么是Gauge Gauge是一款用于编写和运行验收测试的BDD框架&#xff0c;它有如下的特点&#xff1a; 使用Markdown的简单、灵活的语法来描述行为 支持多平台&#xff08;Windows、Linux、macOS&#xff09;、多语言(C#、Java、Javascript、Python、Ruby&#xff09; 支持插…

Facebook定位不准是什么原因?

不知道出海获客的小伙伴有没有人跟我遇到一样的问题&#xff1a;Facebook账号定位与IP地位不一致。定位不准确会导致无法看到账号好友&#xff0c;并且账号可能很快受限&#xff0c;无法正常使用。所以解决这个问题是当务之急&#xff0c;下面分享一下可能出现这个情况的原因以…

从计划到完成:最佳Todolist任务管理软件全指南

在工作节奏越来越快的今天&#xff0c;如何有效地管理任务&#xff0c;清晰安排每一步骤&#xff0c;成了每个职场人士提升效率的关键。特别是对于任务繁杂、需要多团队协作的互联网企业来说&#xff0c;一款好用的任务管理软件无疑是提升生产力的利器。本文将为大家深入测评几…

Mysql的行锁,改一行锁一行

目录标题 前言行级锁1. 共享锁&#xff08;Shared Lock&#xff09;2. 排他锁&#xff08;Exclusive Lock&#xff09; 行级锁中的死锁&#xff08;Dead Lock&#xff09;现象行级锁虽好&#xff0c;但有时候会升级成表级锁第一种情况&#xff0c;当未命中索引时&#xff0c;行…

十五 MyBatis的逆向工程

十五、MyBatis的逆向工程 所谓的逆向工程是&#xff1a;根据数据库表逆向生成Java的pojo类&#xff0c;SqlMapper.xml文件&#xff0c;以及Mapper接口类等。 要完成这个工作&#xff0c;需要借助别人写好的逆向工程插件。 思考&#xff1a;使用这个插件的话&#xff0c;需要…

易快报与金蝶云星空无缝集成的技术实现

易快报与金蝶云星空无缝集成的技术实现 易快报员工对接金蝶员工&#xff1a;数据集成技术案例分享 在企业信息化建设中&#xff0c;数据的高效流动和准确对接是实现业务流程自动化的关键。本文将聚焦于一个具体的系统对接集成案例——易快报员工数据集成到金蝶云星空&#xff…

day-81 排序链表

思路 用一个List存储链表中的值&#xff0c;然后进行升序排序&#xff0c;最后将链表中值依次改为排序后的值即可 Code /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { …

【零基础小白】 window环境下安装RabbitMQ

RabbitMQ环境安装 RabbitMQ是用Erlang语言编写的&#xff0c;因此在安装RabbitMQ之前&#xff0c;需要先安装Erlang环境。 一、 安装Erlang环境 1、准备工作 确定Erlang版本&#xff1a;根据具体需求以及必须和RabbitMQ版本一致安装符合的Erlang版本。 RabbitMQ 和 Erlang 的版…

【MySQL系列】区分大小写与支持表情字符的考量

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

【科普】简述机器学习和深度学习及其相关的算法

文章目录 机器学习1. 基本概念2. 机器学习的分类3. 机器学习的常用方法4. 应用领域5. 挑战与未来6. 未来趋势 机器学习算法 深度学习1.深度学习的基本概念2.深度学习的主要架构3.深度学习的应用4.深度学习的挑战 深度学习算法 机器学习 机器学习是人工智能的一个重要分支&…

232转485模块测试

概述 常用的PLC一般会有两个左右的232口&#xff0c;以及两个左右的485口&#xff0c;CAN口等&#xff0c;但是PLC一般控制的设备可能会有很多&#xff0c;会超出通讯口的数量&#xff0c;此时我们一般会采用一个口接多个设备&#xff0c;这种情况下要注意干扰等因素&#xff0…

STM32外设之SPI的介绍

### STM32外设之SPI的介绍 SPI&#xff08;Serial Peripheral Interface&#xff09;是一种高速的&#xff0c;全双工&#xff0c;同步的通信总线&#xff0c;主要用于EEPROM、FLASH、实时时钟、AD转换器等外设的通信。SPI通信只需要四根线&#xff0c;节约了芯片的管脚&#x…

LLM——10个大型语言模型(LLM)常见面试题以及答案解析

今天我们来总结以下大型语言模型面试中常问的问题 1、哪种技术有助于减轻基于提示的学习中的偏见? A.微调 Fine-tuning B.数据增强 Data augmentation C.提示校准 Prompt calibration D.梯度裁剪 Gradient clipping 答案:C 提示校准包括调整提示&#xff0c;尽量减少产生…

干货 大模型LLM-微调经验分享总结_chatglm-6b alpaca-chinese数据集微调

导读 本文总结了作者在ChatGLM-6B模型微调的经验&#xff0c;并汇总了目前开源项目&数据。 写在前面 大型语言模型横行&#xff0c;之前非常焦虑&#xff0c;现在全面拥抱。目前也有很多开源项目进行大模型微调等&#xff0c;笔者也做了一阵子大模型了&#xff0c;特此来…

aspose如何获取PPT放映页“切换”的“持续时间”值

文章目录 项目场景问题描述问题1&#xff1a;从官方文档和资料查阅发现并没有对切换的持续时间进行处理的方法问题2&#xff1a;aspose的依赖包中&#xff0c;所有的关键对象都进行了混淆处理 解决方案1、找到ppt切换的持续时间对应的混淆对象中的字段2、获取ppt切换的持续时间…

获取vue.config.js里代理的路径

vue.config.js 主要用于配置 Vue CLI 的构建和开发服务器选项&#xff0c;不能直接拿到里面的值&#xff0c;如果是自己重新写的config&#xff0c;引入到页面就可以拿到 下面说&#xff0c;我的解决办法&#xff0c;如果有更好的&#xff0c;一定要给我说啊 在public目录下创…

设计者模式之策略模式

前言 在软件构建过程中&#xff0c;某些对象使用的算法可能多种多样&#xff0c;经常改变&#xff0c;如果将这些算法都写在对象中&#xff0c;将会使对象变得异常复杂&#xff1b;而且有时候支持不频繁使用的算法也是一个性能负担。 如何在运行时根据需要透明地更改对象的算…

分布式事务-SpringBoot集成Seata

1.本地事务和分布式事务概念 事务四大特性 原子性&#xff1a;事务不可再分一致性&#xff1a;数据改变前后&#xff0c;总量必须一致隔离性&#xff1a;事务之间相互隔离&#xff0c;互不干扰持久性&#xff1a;事务一旦提交&#xff0c;数据就会持久化到磁盘&#xff0c;不…

深入探讨钉钉与金蝶云星空的数据集成技术

钉钉报销数据集成到金蝶云星空的技术案例分享 在企业日常运营中&#xff0c;行政报销流程的高效管理至关重要。为了实现这一目标&#xff0c;我们采用了轻易云数据集成平台&#xff0c;将钉钉的行政报销数据无缝对接到金蝶云星空的付款单系统。本次案例将重点介绍如何通过API接…