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,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...
随机推荐
- Prism 学习（一）
转载自:http://www.cnblogs.com/Clingingboy/archive/2009/01/07/prism_part2.html 本篇将介绍Prism中Region的使用. 本篇D ...
- Thymeleaf select 反显 默认选中
后台代码 List<ExamTestPaperDO> list = examTestPaperService.list(map); model.addAttribute("tes ...
- zabbix - [01] 概述
参考:Zabbix教程(Zabbix监控系统精讲) 一.监控介绍 Cacti Cacti 是一套基于PHP.MySQL.SNMP以及RRD Tool开发的监测图形分析工具,Cacti 是使用轮询的方式 ...
- Task VS ValueTask
在 C# 中,异步编程是构建响应式应用程序的基础.Task 是表示异步操作的首选类型.但是,在某些高性能场景中,与 Task 相关的开销可能会达到一个瓶颈.ValueTask 是 .NET Core ...
- 【BUUCTF】Easy MD5
[BUUCTF]Easy MD5 (SQL注入.PHP代码审计) 题目来源 收录于:BUUCTF BJDCTF2020 题目描述 抓包得到提示 select * from 'admin' where ...
- 机器学习 | 强化学习（8） | 探索与开发（Exploration and Exploitation）
8-探索与开发(Exploration and Exploitation) 1.导论 探索与开发二难问题 基于决策的决策过程存在以下两种选择 开发:基于目前的学习做最优的决策 探索:获取更多的学习 最 ...
- LCP 1. 猜数字
地址:https://leetcode-cn.com/problems/guess-numbers/ <?php /** 小A 和 小B 在玩猜数字.小B 每次从 1, 2, 3 中随机选择一个 ...
- SQLserver查询用逗号隔开的字段中是否包含另一个字段的值
CHARINDEX(','+用逗号隔开的字段+',',','+是否包含的字段+',')>0 大于0则存在
- 【ARM+Qt+OpenCV】基于ARM的双目图像采集系统
点击查看代码 系统使用ARM处理器,运行linux系统,Qt创建工程编写主程序,可以使用OpenCV进行图像处理. 通过两个摄像头采集会图像,在LCD上进行显示,然后通过LCD上的按钮实现退出程序.保 ...
- RSA算法详解及相关数学原理解析
RSA算法详解及相关数学原理解析 前言 为了记录自己学习密码学的过程,也是为了便于个人应付相关课程的考核,故写此博客. 本博客总结了怎么用C++手搓一个RSA算法,以及补补欠缺的一些数学知识和可能 ...