关于前端的一些疑问整理（标签属性值和符号）
vue也可以直接在html使用class然后使用样式，但是我们不能完全写死，要实现可变化的操作的话，就需要js的介入，但是vue是js衍生的框架，一般不像原生html和css和js那样（分开放然后html文件用<link>引用css文件，用<script>引用js文件，然后在js文件通过document等dom操作建立js和html接口，然后再针对html和css操作），想要在vue实现js控制html的css的属性（属性并非是height那种，而是style或者class那种节点，实际上style和id和v-for和class那种是不是叫节点来着还是说叫属性，那height那种是不是也叫属性，然后100px那种叫值），只能通过v-bind来实现js来控制<template>和<style>,上面是我的思考不知道对不对，而且我分不清什么时候该用=什么时候该用：以及什么时候用“”和‘’和【】和{}，我觉得用法挺多的
1. 你的思考对不对？
完全正确，而且理解得很到位！
你说：“想要在vue实现js控制html的css的属性...只能通过v-bind来实现”。
这正是Vue.js的设计哲学。它通过指令（如 v-bind） 和 模板语法 在JS（数据）和HTML（视图）之间建立了一种声明式的关联。
-
原生JS做法（命令式）：你需要先用
document.querySelector找到DOM节点，然后手动设置它的style或className。你是“命令”浏览器一步一步去做。 -
Vue做法（声明式）：你直接在HTML标签里声明好：“这个元素的样式（或类名）是由我JS里的这个数据决定的”。当数据变化时，Vue会自动帮你更新DOM。你只需要关心数据的变化，而不需要亲自操作DOM。
<div> 叫 标签Tap
class（html属性）和 height（css属性）和 v-for（vue指令 看成属性） 叫 属性Attribute
10px 叫 值Value
2. 什么时候用 =、:、""、''、[]、{}？
在 JavaScript 中，字符串必须用引号包裹（单引号 '或双引号 "），否则会被解析为变量或关键字。这就是为什么在html中的类名要加单引号
data()里面的数据，类名要用”“包起来，比如aaa=”类名“，然后就能通过aaa得到这个类了
<标签 属性=“值，值” 属性=“值”><标签>
css属性：值；css属性：值；
class=“类1 类2”
：class=“{类名1：js布尔值，类名2：js布尔值}”
：class=“绑定”类名1“的js值，绑定”类名2“的js值”
：class=“绑定【”类名1“，”类名2“】的js数组值”
：class=“”
：style的css属性值需要用单引号包住 css属性：'值‘；css属性：'值‘；
<!-- 对象语法 因为font-size不符合规范 -->
<div :style="{ color: 'red', height: '20px', fontSize: '100px' }"></div>
或者（ ）
<div :style="{ color: 'red', height: '20px', 'font-size': '100px' }"></div>
<!-- 字符串语法（需手动拼接）最好用这个在外面多个单引号就行@@@@@@@@@@@@@@@@@@ -->
<div :style="'color:red; height:20px; font-size:100px'"></div>
原生
<html>
<div class="‘aaa’ ‘bbb’" style="height：10px；width：10px；">文本</div>
</html>
<style>
.aaa{
height:10px；
width:10px；
}
.bbb{
height:20px；
width:20px;
}
</style>
vue
<template>
</template>
<script>
export default{
data(){
return{
aaa:true,
bbb:true,
aaaaaa:{
'active':true,
'active1':true,
},
bbbbbb:"active",
cccccc:"active1",
}
},
computed：{
}，
methods:{
},
}
}
</script>
<style scoped>
.active{
color: #ff0000;
}
.active1{
font-size: 50px;
}
</style>
以下是 JavaScript 对象中 属性名（键）和属性值（值）的引号使用规则总结，结合语言规范和应用场景，分为两类详细说明：
一、属性名（键）的引号规则
属性名是否需要引号，取决于其是否符合 JavaScript 标识符规范：
1. 不需要引号的情况
- 合法标识符：
属性名由字母、数字、_、$组成，且不以数字开头，也非保留字（如class、for）。
示例：const obj = { name: "Alice", // 合法标识符（无引号） age: 25, _id: "12345", $price: 99.99 };
二、属性值（值）的引号规则
属性值是否需要引号，仅取决于值的类型和内容：
3. 不需要引号的情况
- 非字符串类型：
数字、布尔值、null、undefined、对象、数组等无需引号。
示例：const obj = { count: 10, // 数字 isActive: true, // 布尔值 data: { key: 1 }, // 对象 list: [1, 2, 3] // 数组 };
4. 模板字符串（反引号）
动态拼接字符串时，用反引号 ` 定义模板字符串，内部无需双引号。
示例：
const obj = {
message: `用户 ${name} 登录成功` // 模板字符串
};为什么这个对象数组的键是用”“包起来？
JSON 语法规定：
-
所有键名必须用双引号；
-
所有字符串值必须用双引号；
-
不支持单引号、注释、函数等 JS 特有的语法。
浙公网安备 33010602011771号