vue3 基础-样式绑定语法
本篇讲 vue 通过数据去进行 dom 样式的绑定操作, 主要分为 字符串, 数组, 对象等方式, 这个非常好理解, 凭着我们朴素的情感就能一步领悟到位的, 就还是演示一段吧.
字符 & 数组 & 对象
<!DOCTYPE html>
<html lang="en">
<head>
<title> 样式相关 </title>
<script src="https://unpkg.com/vue@3"></script>
<style>
.red {
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
classString: 'blue',
classArray: ['red', 'green', { brown: false}],
classObject: {
red: true,
green: true,
brown: true
}
}
},
template: `
<div :class="classString">字符串</div>
<div :class="classArray">数组</div>
<div :class="classObject">对象</div>
<test class="blue" />
`
})
// 注册一个子组件 test 并被父组件 app 在其 template 中进行调用
app.component('test', {
template: `
<div :class="$attrs.class">one</div>
<div>two</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
最后来小结一波用 数据去控制样式主要有:
- 通过 :class="string" 以字符串的方式进行样式绑定
- 通过 :class="array" 以数组的方式进行样式绑定
- 通过 :class="object" 以对象的方式进行样式绑定
- 通过 :style="classObject" 以行内样式的方式进行样式绑定
这些内容都是非常简单易懂的, 就不再做过的介绍啦, 自己练练就可以测试出来的.
vue3 基础-样式绑定语法的更多相关文章
- VUE3 之 样式绑定
1. 概述 老话说的好:脚踏实地,从小事做起. 言归正传,今天我们来聊聊 VUE3 的样式绑定. 2. 样式绑定 2.1 样式例子 <style> /* 颜色 */ .color-red ...
- Vue.js学习笔记 第二篇 样式绑定
Class绑定的对象语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Vue基础语法(样式绑定,事件处理,表单,Vue组件)
样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- web前端——Vue.js基础学习之class与样式绑定
打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...
- Vue.js学习 Item6 -- Class 与 样式绑定
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此 ...
- Knockout应用开发指南 第三章：绑定语法（1）
原文:Knockout应用开发指南 第三章:绑定语法(1) 第三章所有代码都需要启用KO的ko.applyBindings(viewModel);功能,才能使代码生效,为了节约篇幅,所有例子均省略了此 ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- 3-5 Vue中的样式绑定
Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...
- Vue（九）：样式绑定v-bind示例
Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 st ...
- React实例入门教程(1)基础API,JSX语法--hello world
前 言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...
随机推荐
- 原根学习笔记+BSGS复习笔记
学原根发现拔山盖世算法忘光了,干脆一块儿写了吧. \(BSGS\) 算法 \(BSGS\) 算法,又名拔山盖世算法.北上广深算法.他解决的问题如下: 求解最小的可行的 \(k\),满足 \(a^k\e ...
- ABB机械手维修37001电机开启接触器错误
当ABB机器人报告37001电机开启接触器错误时,这往往意味着电机上电的接触器在执行动作时遇到了障碍.具体而言,该错误通常与位于控制柜内左下角的接触器相关,其中K42和K43负责控制电机的开启操作.深 ...
- Windows下快捷方式 (*.lnk) 的使用技巧整理
日常应用中,许多软件都会在安装过程最后一步添加多个命令,针对其应用创建快捷方式发送到桌面以及快速启动栏和开始菜单,供人们快速找到并打开.在我的使用习惯中也会将诸多常用的应用右键-发送到-桌面快捷方式来 ...
- redis bind protected-mode
概要 redis bind.protected-mode 配置 安装并启动 yum install -y redis systemctl enable --now redis # 使用 redis-s ...
- C# 搭建一个 基于ISqlSugarClient 三层架构框架 涉及数据库仓储 然后中间又有业务逻辑层 案例
要在C#中搭建基于ISqlSugarClient的三层架构框架,你需要定义数据访问层(DAL).业务逻辑层(BLL)和表现层(UI).下面是一个完整的例子,涉及数据库仓储.业务逻辑层,以及依赖注入.这 ...
- C# 私钥加密，公钥解密
/// <summary> /// RSA加密的密匙结构 公钥和私匙 /// </summary> public struct RSAKey { public string P ...
- Dify 和 Manus 的技术架构差异
Dify 框架能够部分实现 Manus 的功能效果,但在复杂任务自动化.多代理协作等领域存在技术差距. 一.核心功能对比 1. 任务拆解与执行能力 Dify:支持通过 Agent 模式 进行任务分解, ...
- [Qt 基础-03] QRadioButton
QRadioButton基础 本文主要根据QT官方帮助文档以及日常使用,简单的介绍一下QRadioButton的功能以及使用 文章目录 QRadioButton基础 简介 autoExclusive ...
- golang定时器函数 每隔几分钟执行一个函数
延时调用 AfterFunc go function() func function() { // TODO 具体逻辑 // 每5分钟执行一次,递归调用自己 time.AfterFunc(5*time ...
- MySQL-全句锁、表锁和元数据锁
全局锁 全局锁是锁住整个数据库实例,只能读,任何关于更新操作的语句都会阻塞. 全局锁的适用场景 针对数据库做全库的逻辑备份操作时,需要使用全局锁. 全局锁的影响: 如果在主库上做全局锁操作,业务基本停 ...