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

vue学习之插值表达式{{}}与显示数据(v-text和v-html)

news 2026/1/28 20:48:28

1.  记得导入

<!-- 在线导入 -->
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- 本地导入 -->
<script src="node_modules/vue/dist/vue.js"></script>

 1. 插值表达式{{}}

<html lang="en">
<head><meta charset="UTF-8"><title>vue插值表达式</title><script src="node_modules/vue/dist/vue.js"></script>
</head>
<body><div id="app"><h1>我最喜欢的人是：{{ name }}</h1></div><script type="text/javascript">//创建vue对象var app = new Vue({//让vue接管div标签el:"#app",//定义name值为"刘雨昕"，用于在div中引用data:{name:"刘雨昕"}});</script>
</body>
</html>

2.  v-text和v-html

v-text：<span v-text="msg"></span>	<!-- 相当于<span>{{msg}}</span> -->
v-html：<span v-html="msg"></span>	<!-- 相当于<span>{{msg}}</span> -->

v-text：把数据当作纯文本显示.
v-html：遇到html标签,会正常解析

3.  v-model的原理

全网最详细的v-model讲解_zayyo的博客-CSDN博客

官方有说到，v-model的原理其实是背后有两个操作：

  1. v-bind绑定value属性的值；
  2. v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中；
    <div class="demo"><textarea v-model="article" cols="30" rows="10"> </textarea><h2>article当前的值是：{{ article }}</h2></div><script type="text/javascript">export default {name: 'demo',data() {return {article: "a"}}}</script>

运行代码当textarea标签中用户输入的内容发生改名，相应的h1标签中的{{article}}也发生同样的更改。

 <input type="checkbox" v-model="sport" value="篮球" />篮球<input type="checkbox" v-model="sport" value="足球" />足球<input type="checkbox" v-model="sport" value="羽毛球球" />羽毛球球<input type="checkbox" v-model="sport" value="兵乓球" />兵乓球您的爱好有：{{ sport }}<script type="text/javascript">export default {name: 'demo',data() {return {message: "内容",sex: '',// 当要 默认选中时要填入值即可 例：sex='男'// agree: false,sport: [],// fruits: '',// fruits2: [],// hobbies: [],// origintobbies: ["篮球", "足球", "乒乓球", "羽毛球", "桌球"],// age: 0,// name: ''}}}</script>

form表单提交数据

<template><div class="from_box"><form action=""><input type="text"  placeholder="请输入昵称" v-model="formMess.account"><input type="password" placeholder="请输入密码" v-model="formMess.act_pwd"><input type="text" placeholder="请输入手机号" v-model="formMess.phone"></form><span class="but" @click="onSubmit()">提交</span></div>
</template><script>
import axios from 'axios';export default {name: "from",data() {return {formMess:{"account":"","act_pwd":"","phone":""}};},methods: {onSubmit() {/* json格式提交： */// let formData = JSON.stringify(this.formMess);/* formData格式提交： */let formData = new FormData();for(var key in this.formMess){formData.append(key,this.formMess[key]);}axios({method:"post",url:"xxxxxxx",headers: {"Content-Type": "multipart/form-data"},withCredentials:true,data:formData}).then((res)=>{console.log(res);});}}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.from_box{form{width:90%;margin: auto;border:.01rem solid gray;display: flex;flex-wrap: wrap;input{width:80%;height:.5rem;margin-bottom: .2rem;border:.01rem solid black;height:.5rem;}}.but{font-size: .14rem;margin-left:5%;}
}
</style>

相关文章：

vue学习之插值表达式{{}}与显示数据(v-text和v-html)

1. 记得导入 <!-- 在线导入 --> <!-- 开发环境版本&#xff0c;包含了用帮助的命令行警告 --> <script src"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本&#xff0c;优化了尺寸和速度 --> <scri…...

编程日记 2023/7/31 21:37:56

2，认识N(logN)的排序【p3】

认识N( logN} 的排序 2.1归并排序2.1.1代码实现归并排序2.1.1.1自己c实现归并排序2.1.1.2gptc实现归并排序2.1.1.3总结2.1.1.4比较行为 2.1.2归并排序使用master公式2.1.3归并排序的扩展2.1.3.1小和问题2.1.3.2逆序对问题 2.2快排、荷兰国旗问题2.2.1问题一2.2.2问题二(荷兰国旗…...

编程日记 2023/7/31 21:36:54

华为机考--服务失效判断--带答案

新2023年华为OD真题机考题库大全-带答案&#xff08;持续更新)or2023华为OD统一考试&#xff08;AB卷&#xff09;题库清单-带答案&#xff08;持续更新&#xff09; 题目描述 某系统中有众多服务&#xff0c;每个服务用字符串&#xff08;只包含字母和数字&#xff0c;长度<…...

编程日记 2023/7/31 21:35:51

C++对C的加强（全）

目录 C对C的加强 命名空间 为什么要使用命名空间 怎么使用命名空间 命名空间的定义 命名空间的使用 使用域解析符 :: 使用using声明 内联命名空间 嵌套命名空间 随时将新的成员加入命名空间 命名空间中 函数的声明和实现分开 无名命名空间 命名空间取别名 使用u…...

编程日记 2023/7/31 21:34:50

ES6及以上新特性

ES6&#xff08;ECMAScript 2015&#xff09;及以上版本引入了许多新特性&#xff0c;每个版本都有不同的增强和改进。以下是 ES6 及以上版本的新特性的详细描述&#xff1a; ES6&#xff08;ECMAScript 2015&#xff09;&#xff1a; let 和 const 声明&#xff1a;引入块级作…...

编程日记 2023/7/31 21:33:49

伦敦金在非农双向挂单

对伦敦金投资有一定经验的投资者都知道&#xff0c;在非农时期&#xff0c;伦敦金市场会出现很大的波动&#xff0c;那么我们如何才能抓住这些波动呢&#xff1f;答案是很难的。但是&#xff0c;有些投资者在多年实践中发明了一种双向挂单的方法&#xff0c;这里和大家一切分享…...

编程日记 2023/7/31 21:32:46

【C语言】—— __attribute__((fallthrough))

__attribute__((fallthrough)) 是一个在编译器中使用的特性&#xff0c;用于指示在 switch 语句中的 case 标签中故意省略 break 语句时的意图。它告诉编译器&#xff0c;故意省略 break 是有意为之&#xff0c;而不是出现了错误或遗漏。 当使用 switch 语句时&#xff0c;通常…...

编程日记 2023/7/31 21:31:45

【深度学习】生成对抗网络Generative Adversarial Nets

序言 本文是GAN网络的原始论文&#xff0c;发表于2014年&#xff0c;我们知道&#xff0c;对抗网络是深度学习中&#xff0c;CNN基础上的一大进步&#xff1b; 它最大的好处是&#xff0c;让网络摆脱训练成“死模型”到固定场所处去应用&#xff0c;而是对于变化的场景&#xf…...

编程日记 2023/7/31 21:30:44

【深度学习】从现代C++中的开始：卷积

一、说明 在上一个故事中&#xff0c;我们介绍了机器学习的一些最相关的编码方面&#xff0c;例如 functional 规划、矢量化和线性代数规划。 本文&#xff0c;让我们通过使用 2D 卷积实现实际编码深度学习模型来开始我们的道路。让我们开始吧。 二、关于本系列 我们将学习如何…...

编程日记 2023/7/31 21:29:44

金融数学方法：蒙特卡洛模拟

1.方法介绍 蒙特卡洛模拟是一种基于概率和统计的数值计算方法&#xff0c;用于解决各种复杂问题。它以概率统计为基础&#xff0c;通过随机抽样和重复实验的方式进行模拟&#xff0c;从而得到问题的近似解。它的基本思想是通过大量的随机样本来近似计算问题的解&#xf…...

编程日记 2023/7/31 21:28:42

vue 文件扩展名中 esm 、common 、global 以及 mini 、 dev 、prod 、runtime 的含义

vue 文件扩展名中 esm 、common 、global 以及 mini 、 dev 、prod 、runtime 的含义 vue.js 直接用在 script 标签中的完整版本&#xff08;同时包含编译器 compiler 和运行时 runtime&#xff09;&#xff0c;可以看到源码&#xff0c;适用于开发环境。 这个版本视图可以写在…...

编程日记 2023/7/31 21:27:41

微服务契约测试框架Pact-Python实战

Pact是一个契约测试框架&#xff0c;有多种语言实现&#xff0c;本文以基于pact-python探究契约测试到底是什么&#xff1f;以及如何实现 官网&#xff1a;自述文件 |契约文档 (pact.io) 契约测试步骤 1、为消费者写一个单元测试&#xff0c;让它通过&#xff0c;并生成契约…...

编程日记 2023/7/31 21:26:36

Linux 给用户 赋某个文件夹操作的权限（实现三权分立）

Linux 给用户 赋某个文件夹操作的权限 这里用的ubuntu16.04 一、配置网站管理员 linux文件或目录的权限分为&#xff0c;读、写、可执行三种权限。文件访问的用户类别分为&#xff0c;文件创建者、与文件创建者同组的用户、其他用户三类。 添加用户 useradd -d /var/www/htm…...

编程日记 2023/7/31 21:25:35

【C++入门到精通】C++入门 —— 类和对象（初始化列表、Static成员、友元、内部类、匿名对象）

目录 一、初始化列表 ⭕初始化列表概念 ⭕初始化列表的优点 ⭕使用场景 ⭕explicit关键字 二、Static成员 ⭕Static成员概念 &#x1f534;静态数据成员&#xff1a; &#x1f534;静态函数成员&#xff1a; ⭕使用静态成员的优点 ⭕使用静态成员的注意事项 三、友…...

编程日记 2023/7/31 21:24:34

“深入理解Spring Boot：从入门到高级应用“

标题&#xff1a;深入理解Spring Boot&#xff1a;从入门到高级应用 摘要&#xff1a;本文将介绍Spring Boot的基本概念、原理和使用方法&#xff0c;并探讨如何在实际开发中充分发挥Spring Boot的优势。通过详细的示例代码&#xff0c;读者将能够深入理解Spring Boot的各个方…...

编程日记 2023/7/31 21:23:32

Apache Spark 的基本概念和在大数据分析中的应用

Apache Spark是一种快速、通用、可扩展的大数据处理引擎&#xff0c;用于大规模数据处理任务&#xff0c;如批处理、交互式查询、实时流处理、机器学习和图形处理等。它的主要特点包括&#xff1a; 1. 速度&#xff1a;Spark使用In-Memory计算技术&#xff0c;将计算结果存储在…...

编程日记 2023/7/31 21:22:31

Debian LNMP架构的简单配置使用

一、LNMP简介 LinuxNginxMysqlPHP组成的网站架构&#xff0c;常用于中小型网站服务。 二、环境 Debian 6.1.27-1kali1 (2023-05-12) Nginx/1.22.1 10.11.2-MariaDB&#xff08;mysql&#xff09; PHP 8.2.7 &#xff08;Debian 6.1.27包含以上包&#xff0c;直接使用即…...

编程日记 2023/7/31 21:21:30

CAN转EtherNet/IP网关can协议破解服务

JM-EIP-CAN 是自主研发的一款 ETHERNET/IP 从站功能的通讯网关。该产品主要功能是将各种 CAN 总线和 ETHERNET/IP 网络连接起来。 本网关连接到 ETHERNET/IP 总线中做为从站使用&#xff0c;连接到 CAN 总线中根据节点号进行读写。 技术参数 ETHERNET/IP 技术参数 网关做为 …...

编程日记 2023/7/31 21:20:30

最适合新手的Java项目/SpringBoot+SSM项目《苍穹外卖》/项目实战、笔记（超详细、新手）[持续更新……]

小知识 软件设计中提到的UI设计中的UI是什么意思&#xff1f; 在软件设计中&#xff0c;UI设计中的UI是User Interface的简称&#xff0c;即用户界面。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计可以让软件变得有个性有品位&#xff0c;同时让操作…...

编程日记 2023/7/31 21:19:26

CloudDriver一款将各种网盘云盘挂在到电脑本地变成本地磁盘的工具 教程

平时我们的电脑可能由于大量的文件资料之类的导致存储空间可能不够&#xff0c;所以我们可以选择将网盘我们的本地磁盘用来存放东西。 CloudDrive 是一款可以将 115、阿里云盘、天翼云盘、沃家云盘、WebDAV 挂载到电脑中&#xff0c;成为本地硬盘的工具&#xff0c;支持 Window…...

编程日记 2023/7/31 21:18:24

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2026/1/27 11:07:41

AI Agent与Agentic AI：原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

编程新知 2026/1/23 7:04:53

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2026/1/25 13:13:20

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/11/9 19:17:07

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/12/5 20:57:13

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2026/1/28 7:28:35

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2026/1/15 6:36:32

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

编程新知 2026/1/26 20:32:06

JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案

JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停​​ 1. ​​安全点（Safepoint）阻塞​​ ​​现象​​：JVM暂停但无GC日志，日志显示No GCs detected。​​原因​​：JVM等待所有线程进入安全点（如…...

编程新知 2025/10/2 12:07:03