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,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...
随机推荐
- 基于GD32的简易示波器
基于GD32的简易示波器项目学习 根据立创训练营项目:[简易数字示波器设计(入门版) - 立创开源硬件平台(https://oshwhub.com/course-examples/yi-qi-yi-b ...
- C# List LinQ Lambda 表达式
------------恢复内容开始------------ # 参考链接 : https://blog.csdn.net/wori/article/details/113144580 首先 => ...
- 【Abaqus】Composite Layup建模
abaqus 的3个复合材料建模途径: 传统的material->section->orientation->step->job的建模方式 Composite Layup建模方 ...
- 【Matlab】求解复合材料层合板刚度矩阵及柔度矩阵
1. matlab文件结构 2. main.m代码 clc clear; warning off; %% %铺层角度数组 angles=[0 90 0]; % ° %单层厚度 ply_thicknes ...
- 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
一.Windows 版 DeepSeek-R1.Ollama 与 AnythingLLM 介绍及核心使用场景 一.组件功能与定位 DeepSeek-R1 模型特性:支持 FP16 计算 ...
- Web前端入门第 12 问：HTML 常用属性一览
HELLO,这里是大熊学习前端开发的入门笔记. 本系列笔记基于 windows 系统. HTML 常用属性大约 70 个,是否又头大了?脸上笑嘻嘻,心里嘛...嘿嘿... 温馨提示:属性不用死记硬背, ...
- 漏洞编号CVE-2022-27191 漏洞公告 ALINUX3-SA-2024:0050: container-tools:rhel8 安全和BUG修复更新
基于Debian的系统(如Ubuntu),使用apt sudo apt-get update sudo apt-get install --only-upgrade container-selinux ...
- SLAM建图导航信息（仿真）
博客地址:https://www.cnblogs.com/zylyehuo/ 基于[基于机器人自主移动实现SLAM建图],详见之前的博客 基于机器人自主移动实现SLAM建图 - zylyehuo - ...
- CSAPP学习笔记——Chapter10,11 系统级I/O与网络编程
CSAPP学习笔记--Chapter10,11 系统级I/O与网络编程 Chapter10 系统级I/O 系统级I/O这一章的内容,主要可以通过这张图概括: Unix I/O模型是在操作系统内核中实现 ...
- 用于线程同步的Interlocked系列函数主要有哪些
原子访问 通过Interlocked系列函数是 Windows API 提供的一组原子操作函数,用于在多线程环境中安全地操作共享变量.当我们执行这些Interlocked系列函数的时候 ,函数会对总线 ...