Vue基础(1)数据绑定

一. 文本插值

普通文本可以使用双大括号 {{ }} ,要想插入 HTML,需要使用 v-html 指令。

<template>
  <h1>Message: {{ state.msg }}</h1>
  <p>{{ state.count + 1 }}</p>
  <p>{{ state.rawHtml }}</p>
  <p v-html="state.rawHtml"></p>
</template>

<script setup>
import { reactive } from 'vue'

const state = reactive({
  msg: 'Hello World!',
  count: 3,
  rawHtml: '<a href="https://www.baidu.com">百度一下</a>'
})
</script>

在这里插入图片描述

二. 条件渲染

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

v-show 指令会在 DOM 渲染中保留该元素,只是会切换元素上 display 的 CSS 属性。

<script setup>
import { ref } from 'vue'

const type = ref("C")
</script>

<template>
	<p v-if="type === 'A'">A</p>
	<p v-else-if="type === 'B'">B</p>
	<p v-else>C</p>

	<p v-show="type === 'A'">A</p>
	<p v-show="type === 'B'">B</p>
	<p v-show="type === 'C'">C</p>
</template>

在这里插入图片描述

三. 列表渲染

v-for 指令可以基于一个数组来渲染一个列表,需要使用 item in items 形式的特殊语法,其中 items 是源数据的数组,而 item 是迭代项的别名。v-for 也支持使用可选的第二个参数表示当前项的位置索引。

<script setup>
import { reactive } from 'vue'

const items = reactive([{
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
}])
</script>

<template>
	<ul>
    <template v-for="(item, index) in items">			//列表
      <li v-for="(value, key, idx) in item">			//对象
        {{ index }}.{{ idx }}  {{ key }}: {{ value }}
      </li>		  
		</template>
  </ul>
</template>

在这里插入图片描述

四. Attribute 绑定

双大括号不能在 HTML attribute 中使用,想要响应式的绑定一个 attribute,应该使用 v-bind 指令,可以简写为 :

v-bind 指令将元素的 attribute 与组件的属性进行绑定,如果绑定的值是 null 或 undefined,那么该 attribute 将会从渲染的元素上移除。

<template>
  <p v-bind:id="state.id" :class="state.class">单一属性绑定</p>
  <button :disabled="state.isButtonDisabled">点击一下</button>
  <p v-bind="state.objectOfAttrs">多个属性绑定</p>
  <p :[state.attributeName]="state.id">动态参数名</p>
</template>

<script setup>
import { reactive } from 'vue'

const state = reactive({
  attributeName: 'id',
  id: 'container',
  class: 'wrapper',
  isButtonDisabled: true,
  objectOfAttrs: {
    id: 'container',
    class: 'wrapper',
  }
})
</script>

在这里插入图片描述

五. class 与 style 绑定

Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外,表达式的值也可以是对象或数组。

<template>
<p class="static" :class="{ active: isActive, 'text-danger': hasError }">绑定对象</p>
<p :class="classObject">绑定一个返回对象的计算属性</p>
<p :class="[isActive ? activeClass : '', errorClass]">绑定数组</p>

<p :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">样式多值</p>
</template>

<script setup>
import { ref, computed } from 'vue'

const isActive = ref(true)
const hasError = ref(false)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': hasError.value
}))

const activeClass = ref('active')
const errorClass = ref('text-danger')

</script>

在这里插入图片描述

六. 事件绑定

Vue 使用 v-on (简写为 @)指令来监听 DOM 事件,并在事件触发时执行相应的 JavaScript。

<template>
  <p> {{count}} </p>
  <button @click="add"> Add 1 </button>
  <!-- <button @click="count++"> Add 1 </button> -->
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

const add = (event) => {
  count.value++
  console.log(event.target)		// 通过enent.target访问DOM元素
}
</script>

七. 表单输入绑定

在前端处理表单时,使用 v-model 指令将表单输入框的内容同步给 JavaScript 相应的变量。

<script setup>
import { reactive } from 'vue'

const state = reactive({
	input: '',
	textarea: '',
	checked: true,
	checkedNames: ['John', 'Mike'],
	picked: 'two',
	selected: 'A',
})
</script>

<template>
	<p>输入框:{{ state.input }}</p>
	<input v-model="state.input"/>

	<p>多行文本:{{ state.textarea }}</p>
	<textarea v-model="state.textarea" />

	<p>单一复选框:{{ state.checked }}</p>
	<input type="checkbox" v-model="state.checked" />
	<label for="checkbox">{{ state.checked }}</label>

	<p>多个复选框:{{ state.checkedNames}}</p>
	<template v-for="item in ['Jack', 'John', 'Mike']">
		<input type="checkbox" :value="item" v-model="state.checkedNames" />
		<label :for="item">{{ item }}</label>
	</template>

	<p>单选按钮: {{ state.picked}}</p>
	<template v-for="item in ['one', 'two']">
		<input type="radio" :value="item" v-model="state.picked"/>
		<label :for="item">{{ item }}</label>
	</template>

	<p>选择器:{{ state.selected}}</p>
	<select v-model="state.selected">
		<template v-for="item in ['A', 'B', 'C']">
			<option>{{ item }}</option>
		</template>
	</select>
</template>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java编程语言,使用自定义二元组对象替代map集合实现Key-Value格式的数据存储

一、背景 url请求地址&#xff0c;后面使用&把多个请求参数拼接起来&#xff0c;例如&#xff1a;?p1v1&p2v2&p3v3 它们的key分别是p1/p2/p3&#xff0c;对应的value分别是v1/v2/v3。 也许很多人都会通过map集合来存储&#xff0c;算比较通用的做法了&#xff1…

Windows:iHasher-v0.2安装报错Windows 功能 .NET Framework 3.5

一、情景描述 我们从MSDN下载了镜像文件&#xff0c;一般要验证下载文件的HASH值是否与MSDN上发布的一致&#xff0c;确保传出过程中iso文件没有损坏。 MSDN地址&#xff1a;https://msdn.itellyou.cn/ 我从MSDN下载了Hasher工具&#xff0c;进行校验。 但是&#xff0c;安装…

有道:一季度业绩超市场预期,生成式AI商业化落地进程加快

5月23日&#xff0c;教育科技公司网易有道&#xff08;NYSE&#xff1a;DAO&#xff09;公布了2024年第一季度未经审计的财务报告。报告期内&#xff0c;受益于“AI”加“教育”双轮驱动&#xff0c;业绩表现超市场预期&#xff0c;业务健康度大幅改善。 财报显示&#xff0c;…

筛斗数据提取:如何保证数据精准提取与合规性并存

数据治理的艺术&#xff1a;精准提取与合规性并存 在当今信息化高速发展的时代&#xff0c;数据已成为企业最宝贵的资源之一。然而&#xff0c;如何有效管理和利用这些数据&#xff0c;确保数据的精准提取和合规性并存&#xff0c;已成为企业面临的重要挑战。本文将从数据治理…

Git远程控制

文章目录 1. 创建仓库1.1 Readme1.2 Issue1.3 Pull request 2. 远程仓库克隆3. 推送远程仓库4. 拉取远程仓库5. 配置Git.gitignore配置别名 使用GitHub可以&#xff0c;采用Gitee也行 1. 创建仓库 1.1 Readme Readme文件相当于这个仓库的说明书&#xff0c;gitee会初始化2两份…

git的使用之筛选文件上传到远程服务器仓库

.gitignore 让本地文件有选择上传到远程服务器仓库 下面是linux内核的.gitignore # # NOTE! Dont add files that are generated in specific # subdirectories here. Add them in the ".gitignore" file # in that subdirectory instead. # # NOTE! Please use gi…

Flutter容器

内边距padding class MyBody extends StatelessWidget {overrideWidget build(BuildContext context) {return Container(//为了可以看出内边距&#xff0c;将容器设置成红色color: Colors.red,child: Padding(padding: EdgeInsets.all(15),child: MyImage(https://raw.github…

BioTech - 蛋白质结构评估指标的计算方法 (Python 源码) 支持 TMScore\RMSD\DockQ 等

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://blog.csdn.net/caroline_wendy/article/details/139174635 CASP15 中 T1124 的 目标结构(上) 与 预测结构(下) 蛋白质结构评估是生物信息学和结构生物学中的一个重要环节,涉及使用一系列的计算方法来分析预…

【linux-IMX6ULL-字符设备驱动简单框架实验】

目录 1. 字符设备驱动简介1.1 重要函数1.2 简单框架代码流程1.3 linux中关于驱动的重要命令 2. 字符设备驱动简单框架编写2.1 添加LICENSE信息2.2 驱动模块的入口与出口2.3 入口和出口函数的编写2.4 设备操作结构体定义2.4.1 结构体函数内容填充 3. 应用程序简介&#xff1a;4.…

Python正则表达式与Excel文件名批量匹配技术文章

目录 引言 正则表达式基础 Python中的re模块 Excel文件名批量匹配案例 常见问题与解决方案 结论 引言 在现代办公环境中&#xff0c;Excel文件几乎成为了数据分析和处理的标配工具。由于Excel文件可能包含大量的数据和信息&#xff0c;因此&#xff0c;对Excel文件的命名…

16 _ WebAPI:setTimeout是如何实现的?

在上一篇文章中我们介绍了页面中的事件和消息队列&#xff0c;知道了浏览器页面是由消息队列和事件循环系统来驱动的。 那在接下来的两篇文章中&#xff0c;我会通过setTimeout和XMLHttpRequest这两个WebAPI来介绍事件循环的应用。这两个WebAPI是两种不同类型的应用&#xff0…

嵌入式岗位,你有能力,你同样可以拿到高薪资

在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「嵌入式的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#xff01;&#xff01; 就算你进去了&#xff0…

分布式限流总结

1、计数器 java内部可以使用原子计数器AtomicInteger\Semaphore信号量来做简单的限流 // 限流的个数private int maxCount 10;// 指定的时间内private long interval 60;// 原子类计数器private AtomicInteger atomicInteger new AtomicInteger(0);// 起始时间private lon…

【译】组复制和 Percona XtraDB 集群: 常见操作概述

原文地址&#xff1a;Group Replication and Percona XtraDB Cluster: Overview of Common Operations 在这篇博文中&#xff0c;我将概述使用 MySQL Group Replication 8.0.19&#xff08;又称 GR&#xff09;和 Percona XtraDB Cluster 8 (PXC)&#xff08;基于 Galera&…

Codesys软件做EtherNET/IP主站与HT3S-EIS-MDN网关通讯步骤

Codesys软件做EtherNET/IP主站与HT3S-EIS-MDN网关通讯步骤 打开codesys软件&#xff0c;新建项目&#xff0c;选择标准项目进入界面后选择CODESYS Control Win v3 x64 &#xff0c;点击确定。 3.在桌面找到显示隐藏图标&#xff0c;找到如下图所示图标&#xff0c;右击在弹出…

Linux编译器-gcc/g++使用

&#x1fa90;&#x1fa90;&#x1fa90;欢迎来到程序员餐厅&#x1f4ab;&#x1f4ab;&#x1f4ab; 主厨&#xff1a;邪王真眼 主厨的主页&#xff1a;Chef‘s blog 所属专栏&#xff1a;青果大战linux 总有光环在陨落&#xff0c;总有新星在闪烁 gcc概述 GCC是GNU C…

C++ | Leetcode C++题解之第101题对称二叉树

题目&#xff1a; 题解&#xff1a; class Solution { public:bool check(TreeNode *u, TreeNode *v) {queue <TreeNode*> q;q.push(u); q.push(v);while (!q.empty()) {u q.front(); q.pop();v q.front(); q.pop();if (!u && !v) continue;if ((!u || !v) ||…

Excel插入多行VBA实现

我们还可以利用 VBA&#xff08;Visual Basic for Applications&#xff09;宏语言&#xff0c;在 Excel 中写一个 VBA 宏来自动插入多行数据。这种方法可以方便我们自定义需要插入的行数和插入位置。下面是编写 VBA 宏的步骤&#xff1a; 1、按下Alt F11快捷键&#xff0c;打…

亚马逊云科技介绍

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 一、亚马逊云科技云计算1.1 云计算的优势 二、领先的云平台三、亚马逊云科技区域的全球网络…

从零开始实现自己的串口调试助手(1) - ui界面搭建

UI 界面搭建 ui界面整体演示 ui对象拆分 更多的细节就不方便展开了&#xff0c;下面有提示完成ui设计的提示 在创建工程前 记得把编码改为utf-8 ui设计技巧: ctrl 鼠标左键实现拖动实现复制粘贴 groupBox &#xff1a; 带标题的文本框 栅格布局 -- 只有一个控件的时候会铺满…