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>

在这里插入图片描述

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

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

相关文章

【教学类-58-02】黑白三角拼图02(3*3宫格)262144种

背景需求&#xff1a; 已知黑白三角拼图2*2&#xff08;4个拼图&#xff09;一共有256种排列方法 【教学类-58-01】黑白三角拼图01&#xff08;2*2宫格&#xff09;256种-CSDN博客文章浏览阅读142次&#xff0c;点赞5次&#xff0c;收藏12次。【教学类-58-01】黑白三角拼图01…

深度学习之基于Matlab卷积神经网络(CNN)手写数字识别

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 手写数字识别是计算机视觉领域的一个重要问题&#xff0c;也是深度学习应用的一个典型场景。卷…

什么是固态继电器?

固态继电器是不需要使用任何机械部件的开关继电器。这通常使它们具有比普通机电继电器寿命更长的优势&#xff0c;然而&#xff0c;尽管固态继电器速度快且耐用&#xff0c;但仍具有某些设计规定。 固态继电器风靡全球&#xff0c;彻底改变了从农业自动化到航空航天等各个行业…

中国数学会发布数学期刊分级目录

T1,T2,T3均是中国数学会的期刊分类 下载地址&#xff1a; 中国数学会发布数学期刊分级目录-太原理工大学数学学院 (tyut.edu.cn)

银行总部文件自动下发,如何保证不影响专线网络使用?

银行在我国金融体系中占据重要地位&#xff0c;是我国市场经济的重要组成部分。我国商业银行随着自身不断发展&#xff0c;规模日益扩大&#xff0c;形成了“总行-分行-支行-营业网点”的典型层级管理模式。在日常中&#xff0c;银行总部存在文件下发的场景&#xff1a; 银行总…

1.4 接入网和物理媒体

接入网络和物理媒体 Q: 怎样将端系统和边缘路由器连接&#xff1f; 住宅接入网络 单位接入网络 &#xff08;学校、公司&#xff09; 无线接入网络 注意&#xff1a; 接入网络的带宽 (bits persecond) &#xff1f; 共享/专用&#xff1f; 接入网: 这是指将端系统物理连接到其…

数学基础 -- 条件概率、后验概率与联合概率

条件概率与后验概率 技术背景 条件概率和后验概率是概率论中的两个重要概念&#xff0c;在机器学习和贝叶斯推理中尤为关键。理解这两个概念对于处理不确定性和进行推理具有重要意义。本文将通过直观的例子和数学解释来详细介绍条件概率与后验概率。 条件概率 条件概率是指…

Linux rzsz安装(在线安装、离线安装),用于上传下载文件

在线安装&#xff1a; yum -y install lrzsz 离线安装&#xff1a; 1.下载安装包地址&#xff1a;http://freshmeat.sourceforge.net/projects/lrzsz/ 2.通过同一网络内可以上传文件的机器&#xff08;B机&#xff1a;10.210.168.18&#xff09;先将lrzsz-0.12.20.tar.gz上传至…

盘点Java中的排序操作方案

盘点Java中的排序操作方案 Comparable 接口-自然排序 类implements Comparable接口 类重写 public int compareTo(Object obj)方法 如果返回值为正数&#xff0c;则表示当前对象(调用该方法的对象)比 obj 对象“大”&#xff1b;反之“小”&#xff1b;如果为零的话&#x…

多家知名媒体到访“光子1号金融算力中心“ 交流AI与算力未来观

5月23日&#xff0c;企商在线 “光子1号金融算力中心媒体参观日”活动成功举办&#xff0c;十多家主流媒体、IT行业媒体及自媒体代表走进光子1号金融算力中心&#xff0c;深入了解企商业务发展、战略规划及“光子1号金融算力中心”等企商打造的新型数字基础设施&#xff0c;共同…

Python条件分支与循环

大家好&#xff0c;当涉及到编写高效和灵活的程序时&#xff0c;条件分支和循环是 Python 中至关重要的概念。它们允许我们根据不同的条件执行不同的代码块&#xff0c;或者重复执行一组语句。条件分支和循环是测试开发工程师在日常工作中经常使用的工具&#xff0c;无论是编写…

光耦合器的特性和应用概述

光耦合器又称光电耦合器&#xff0c;是现代电子学中必不可少的元件&#xff0c;确保隔离电路之间安全有效的信号传输。本文探讨了光耦合器的特性及其多样化应用&#xff0c;强调了它们在各种电子系统中的关键作用。 什么是光耦合器&#xff1f; 光耦合器是一种设计用于利用光传…

Java 18新特性详细介绍

Java作为一门广泛使用的编程语言&#xff0c;一直在不断地发展和更新。Java 18是Java的最新版本&#xff0c;它引入了许多新特性和改进&#xff0c;使得开发过程更加高效、安全和便捷。本文将详细介绍Java 18的新特性&#xff0c;帮助开发者更好地了解和应用这些新功能。 JEP …

vue详解(4)

1. v-model 原理 原理&#xff1a;v-model本质上是一个语法糖。例如应用在输入框上&#xff0c;就是 value属性 和 input事件 的合写。作用&#xff1a;提供数据的双向绑定。① 数据变&#xff0c;视图跟着变 :value&#xff1b;② 视图变&#xff0c;数据跟着变 input注意&am…

【MySQL数据库】CRUD 增 删 改 查 超详解,有这一篇就够了!

​ ​ &#x1f525;个人主页&#xff1a; 中草药 &#x1f525;专栏&#xff1a;【MySQL】探秘&#xff1a;数据库世界的瑞士军刀 目录 ⚗️一.CRUD &#x1f9ea;二.新增&#xff08;Create&#xff09; &#x1f9eb;1.基本操作 &#x1f9ec;2.使用SELECT插入 &#x…

长难句5.24

There is pressure for change from within the profession, but opponents of change among the regulators insist that keeping outsiders out of a law firm isolates lawyers from the pressure to make money rather than serve clients ethically. 在(律师)行业内部也有…

云计算历史、业务驱动因素和术语 (Cloud Computing History, Business Drivers and Terminologies)

云计算的历史与定义 (History and Definition of Cloud Computing) 历史 (History) 云计算的概念化始于很久以前&#xff0c;早在1963年。麻省理工学院从美国国防高级研究计划局获得研究资金&#xff0c;用于开发一种“计算机可同时被两人或更多人使用”的技术。在早期的云计算…

区块链钱包如果丢失了私钥或助记词,资产还能恢复吗?

如果你丢失了区块链钱包的私钥或助记词&#xff08;通常是用于恢复钱包的短语或种子&#xff09;&#xff0c;那么你的资产在大多数情况下是无法恢复的。私钥是访问和控制你在区块链上资产的唯一凭证&#xff0c;而助记词&#xff08;如BIP39标准中的12、18、24个单词的短语&am…

centos常见命令总结

一、【写在前面】 注意到csdn在鼓励作者创作centos常见命令相关的文章&#xff0c;借此机会水一篇博文。 centos作为上个版本国内最常用的开源操作系统&#xff0c;占有量非常恐怖&#xff0c;排个前三应该没有任何疑问。但是我建议直接去学ubuntu&#xff0c;因为主流在用的…

【系统架构师】-案例篇(十五)SOA、微服务与数据库

1、可复用构件应具备哪些属性 可用性&#xff1a;构件必须易于理解和使用。 质量&#xff1a;构件及其变形必须能正确工作。 适应性&#xff1a;构件应该易于通过参数化等方式在不同语境中进行配置。 可移植性&#xff1a;构件应能在不同的硬件运行平台和软件环境中工作。 可变…