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,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...
随机推荐
- 【Manim】空间与变换笔记
[Manim]空间与变换笔记 所有常量都可以在constants.py中找到 屏幕空间 屏幕中心为原点(0,0,0),遵循右手坐标系,向右为x轴正方向,向上为y轴正方向,向前为z轴负方向,旋转时正方向 ...
- 一文搞懂 APP 算法备案
今天来给大家好好科普一下超重要的 APP 算法备案,这可是和我们日常使用 APP 以及 APP 运营都息息相关的知识点哦! 什么是算法备案 简单来讲,算法备案就相当于 APP 运营者要把自家 APP ...
- DW002 - 数据仓库模型设计
数据模型 关系模型与维度模型 常见数据模型设计方法 数据模型 1. 什么是数据模型 模型 - Model 模型是指对于某个实际问题或者客观事物.规律进行抽象后的一种形式化表达方式 比如地图.建筑设计沙 ...
- Hbase - hbase hbck介绍
原文地址:https://bbs.huaweicloud.com/blogs/353332 HBaseFsck(hbck)是一种命令行工具,可检查hbase集群的region一致性和表完整性的问题,同 ...
- go语言实现终端里的倒计时
最近在更新系统的时候发现pacman的命令行界面变了,我有很久没更新过设备上的Linux系统了,所以啥时候变的不好说.但这一变化成功勾起了我的好奇心.新版的更新进度界面如下: 新的更新进度界面能同时显 ...
- 多智能体粒子环境(Multi-Agent Particle Env)食用指南--从入门到入土
0.项目地址: 原地址:openai/multiagent-particle-envs: Code for a multi-agent particle environment used in the ...
- Web前端入门第 13 问：HTML 标签和属性是否区分大小写？
HELLO,这里是大熊学习前端开发的入门笔记. 本系列笔记基于 windows 系统. 注意:以下截图都来源于 Chrome 浏览器,不同浏览器可能会产生不同的渲染结果. 思考一个问题:英文写法都分大 ...
- docker push image harbor http 镜像
前言 搭建的 harbor 仓库为 http 协议,在本地登录后,推送镜像发生如下报错: docker push 192.168.xx.xx/test/grafana:v10.1.1 The push ...
- 面试官：工作中优化MySQL的手段有哪些？
MySQL 是面试中必问的模块,而 MySQL 中的优化内容又是常见的面试题,所以本文来看"工作中优化MySQL的手段有哪些?". 工作中常见的 MySQL 优化手段分为以下五大类 ...
- 【Docker】镜像
Docker 镜像 是什么 UnionFS(联合文件系统) UnionFS(联合文件系统):Union文件系统(UnionFS)是一种分层(layer).轻量级并且高性能的文件系统,它支持对文件系统的 ...