博客围绕购物车列表展开，包含大量Vue代码。有数据绑定、条件判断、字符串处理等表达式，还有表格样式设置、搜索按钮绑定事件、输入框按键监听等代码，同时涉及数据监听、路由监听等Vue特性的使用。
#### v-text
作用：更新元素的 `textContent`。如果要更新部分的 `textContent`，需要使用 `{{ Mustache }}` 插值。
区别：与{{}}插值语法的区别：v-text会替换掉元素节点中的内容，{{xx}}则不会。
#### v-html
作用：更新元素的 `innerHTML`。
区别：与插值语法的区别：
* v-html会替换掉节点中所有的内容，{{xx}}则不会。
* v-html可以识别html结构。
严重注意：v-html有安全性问题！
* 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
* 一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
#### v-cloak
作用：这个指令保持在元素上直到关联实例结束编译：Vue实例创建完毕并渲染模板之后，会删掉v-cloak属性
和CSS 规则 `[v-cloak] { display: none }` 一起用时，隐藏未编译的{{}}，网速慢的时候避免在页面渲染之前显示{{}}。
#### v-once
只渲染元素和组件**一次**。
* v-once所在节点在初次动态渲染后，随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容。
* 以后数据的改变跳过v-once，不会引起v-once所在结构的更新，可以用于优化更新性能。
#### v-pre
作用：跳过这个元素和它的子元素的编译过程。
* 可以用来显示原始 Mustache 标签。
* 跳过大量没有指令、插值语法的节点，会加快编译。
### 绑定JS表达式
#### JS表达式
Vue 在所有的数据绑定（比如：模板语法和指令语法）中都支持完整的 JavaScript 表达式：
{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }}
{{ message.split(‘’).reverse().join(‘’) }}
这些表达式都会被作为 JavaScript ，以组件为作用域解析执行。
在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：
* 在文本插值中 (双大括号)
* 在任何 Vue 指令 (以 `v-` 开头的特殊 attribute) attribute 的值中
每个绑定仅支持**单一表达式**，也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 `return` 后面，这些都是JS表达式，但是绑定不能使用JS语句。
模板表达式都被放在沙盒中，只能访问[全局变量的一个白名单](https://bbs.csdn.net/topics/618166371)，如 `Math` 和 `Date` 。你不应该在模板表达式中试图访问用户定义的全局变量。
#### 调用函数
可以在绑定的表达式中使用一个组件暴露的方法：
绑定在表达式中的方法在组件每次更新时都会被重新调用，因此**不**应该产生任何副作用，比如改变数据或触发异步操作。
#### JS表达式和JS语句的区分
JS表达式是一个表达式会产生一个值，可以放在任何一个需要值的地方
* `a`：变量a是表达式
* `a+b`：a+b会得到一个结果
* `fn(1)`：调用fn函数会得到一个结果
* `x === y ? 'a' : 'b'` 使用三目运算符也会得到一个结果
* `str.slice(2)` 返回一个字符串
* `arr.reduce()` 调用数组的遍历函数也会得到一个结果
JS语句（JS代码）是向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
* `a = 5`
* `c = a + b`
* `if(){}`
* `for(){}`
## 数据绑定 v-bind/v-model
Vue中有2种数据绑定的方式：
### 单向绑定
单向绑定(v-bind)：
* 语法：v-bind:href =“xxx” 或简写为 :href
* 特点：数据只能从 data 流向页面
### 双向绑定
你可以用 `v-model` 指令在表单 `<input>`、`<textarea>` 及 `<select>` 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 `v-model` 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
双向绑定(v-model)：
* 语法：v-mode:value=“xxx” 或简写为 v-model=“xxx”
* 特点：数据不仅能从 data 流向页面，还能从页面流向 data
说明：
* 双向绑定一般都应用在表单类元素上（如：input、select等）
* v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
## 条件渲染 v-if/v-show
### v-if
v-if条件渲染的使用：条件为真时，显示节点；条件为假时移除节点。
* v-if=“表达式”
* v-else-if=“表达式”
* v-else
注意：
* `v-else` 元素必须紧跟在带 `v-if` 或者 `v-else-if` 的元素的后面，否则它将不会被识别。
* `v-else-if` 也必须紧跟在带 `v-if` 或者 `v-else-if` 的元素之后，否则它将不会被识别。
优秀
良好
不及格
### v-show
v-show控制元素的显示隐藏：条件为真，显示节点；条件为假则使用display:none 隐藏节点。
* v-show=“表达式”
show为true时显示
### v-if和v-show区别
v-if和v-show指令都可以用于控制元素是否显示
区别：
* 条件为假，v-if是把元素从DOM中删除，v-show是使用使用display:none 隐藏元素
* v-show 则适用于需要频繁切换的场景
* v-if 适用于在运行时很少改变条件，不需要频繁切换的场景
初次渲染页面，当条件不成立时，v-if不会渲染DOM元素；v-show依然会渲染DOM元素，只是使用display:none 隐藏了元素。
当条件为假时，使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
### 在 `<template>` 元素上使用 v-if
因为 `v-if` 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 `<template>` 元素当做不可见的包裹元素，并在上面使用 `v-if`。最终的渲染结果将不包含 `<template>` 元素。
注意：不能在template上使用v-show
Title
Paragraph 1
Paragraph 2
## 列表渲染 v-for
### v-for与数组
我们可以使用 `v-for` 指令基于一个数组来渲染一个列表。`v-for` 指令的值需要使用 `item in items` 形式的特殊语法，其中 `items` 是源数据的数组，而 `item` 是迭代项的**别名**
* 语法：`v-for="(item, index) in arr"`
* `item` 是数组元素，也可以用其他变量名代替，比如：`val`
* `index` 是数组元素的索引值，也可以用其他变量名代替，比如：`i`
* 可遍历的数据有：数组、对象、字符串、整数
- {{index+1}}.《{{book.name}}》 ￥{{book.price.toFixed(2)}}
- {{index+1}}.《{{name}}》 ￥{{price.toFixed(2)}}
### v-for与对象
你也可以使用 `v-for` 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 `Object.keys()` 的返回值来决定。
* 语法：`v-for="(value, key, index) in obj"`
* `value`：对象属性值
* `key`：对象属性名
* `index`：索引
- {{index}}. {{key}}: {{value}}
你也可以用 `of` 替代 `in` 作为分隔符，因为它更接近 JavaScript 迭代器的语法：
### v-for与数字
`v-for` 可以直接接受一个整数值。在这种用例中，会将该模板基于 `1...n` 的取值范围重复多次。
template
{{ n }}
注意此处 `n` 的初值是从 `1` 开始而非 `0`
### v-for与`<template>`
与模板上的 `v-if` 类似，你也可以在 `<template>` 标签上使用 `v-for` 来渲染一个包含多个元素的块。例如：
template
- {{ item.msg }}
### v-for 与 v-if 一同使用
#### vue2.x版本
>
> 注意我们**不**推荐在同一元素上使用 `v-if` 和 `v-for`。更多细节可查阅[风格指南](https://bbs.csdn.net/topics/618166371)。
>
>
>
当它们处于同一节点，`v-for` 的优先级比 `v-if` 更高，这意味着 `v-if` 将分别重复运行于每个 `v-for` 循环中。当你只想为*部分*项渲染节点时，这种优先级的机制会十分有用，如下：
- {{ todo }}
上面的代码将只渲染未完成的 todo。 而如果你的目的是有条件地跳过循环的执行，那么可以将 `v-if` 置于外层元素 (或 [`) 上。如：- {{ todo }}
No todos left!
#### vue3.x版本 > > 注意 > > > 同时使用 `v-if` 和 `v-for` 是**不推荐的**，因为这样二者的优先级不明显。请转阅[风格指南](https://bbs.csdn.net/topics/618166371)查看更多细节。 > > > 当它们同时存在于一个节点上时，`v-if` 比 `v-for` 的优先级更高。这意味着 `v-if` 的条件将无法访问到 `v-for` 作用域内定义的变量别名： template- {{ todo.name }}
在外新包装一层 `<template>` 再在其上使用 `v-for` 可以解决这个问题 (这也更加明显易读)：- {{ todo.name }}
### key的原理 Vue中的key有什么作用？（key的内部原理） **一、虚拟DOM中key的作用** key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： * 旧虚拟DOM中找到了与新虚拟DOM相同的key： + 若虚拟DOM中内容没变, 直接使用之前的真实DOM！ + 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 * 旧虚拟DOM中未找到与新虚拟DOM相同的key：创建新的真实DOM，随后渲染到到页面。 **二、用index作为key可能会引发的问题** * 若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。 * 如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。 **三、开发中如何选择key?** * 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。 * 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示， 使用index作为key是没有问题的。 通过下面的例子改变key的值为index和id，来看一看不同key值下的页面效果：table{
border: 1px solid #000;
border-spacing: 0;
border-collapse: collapse;
}
td,th{
border: 1px solid #000;
padding: 10px;
}购物车列表
### 数组变化侦测 #### 变更方法 Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括： * `push()` * `pop()` * `shift()` * `unshift()` * `splice()` * `sort()` * `reverse()` #### 替换一个数组 变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变 (immutable) 方法，例如 `filter()`，`concat()` 和 `slice()`，这些都不会更改原数组，而总是**返回一个新数组**。当遇到的是非变更方法时，我们需要将旧的数组替换为新的：this.items = this.items.filter((item) => item.message.match(/Foo/))
你可能认为这将导致 Vue 丢弃现有的 DOM 并重新渲染整个列表——幸运的是，情况并非如此。Vue 实现了一些巧妙的方法来最大化对 DOM 元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会是一种非常高效的操作。 #### 注意事项 由于 JavaScript 的限制，Vue **不能检测**数组和对象的变化。[深入响应式原理](https://bbs.csdn.net/topics/618166371)中有相关的讨论。 ## 事件监听 v-on 我们可以使用 `v-on` 指令 (简写为 `@`) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：`v-on:click="methodName"` 或 `@click="handler"`。 事件处理器的值可以是： 1. **内联事件处理器**：事件被触发时执行的内联 JavaScript 语句 (与 `onclick` 类似)。 2. **方法事件处理器**：一个指向组件上定义的方法的属性名或是路径。 ### 内联事件处理器 内联事件处理器通常用于简单场景，并在触发时运行一些 JavaScript 代码。 语法：`v-on:eventType="JS代码"`。 * eventType 是DOM事件的名称，比如鼠标点击事件：clicknum = {{num}}
### 方法事件处理器 随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 `v-on` 也可以接受一个方法名或对某个方法的调用。 #### 事件函数 语法：`v-on:eventType="方法"`。 * 方法定义在vue实例的methods选项中 * methods 是用来定义vue实例的方法，在定义的方法中 this 指向该vue实例 * methods中定义的函数不能使用箭头函数，因为箭头函数中的this指向上层作用域的this，如果在这里使用箭头函数，this不再指向vue实例，而是指向window * v-on:click=“search” 简写为 @click=“search”搜索
#### 事件对象 * 方法事件处理器会自动接收原生 DOM 事件并触发执行。能够通过被触发事件的 `event.target.tagName` 访问到该 DOM 元素。 * 事件函数传递默认参数 $event 表示DOM事件对象 * @click=“search” 和 @click=“search($event)” 效果一致，但后者可以传参；搜索
#### 事件传参 * 调用方法时，可以添加圆括号，也可以不加，添加圆括号可以传递参数。 * 事件对象通过传入一个特殊的 `$event` 变量，或者使用内联箭头函数。<button @click=“search(6)”>搜索
<button @click=“search(6, $event)”>搜索
<button @click=“(event) => search(6, event)”>搜索
### 事件修饰符 * prevent：阻止默认事件（常用）， event.preventDefault()； * stop：阻止事件冒泡（常用），event.stopPropagation()； * once：事件只触发一次（常用）； * capture：使用事件的捕获模式； * self：只有event.target是当前操作的元素时才触发事件； * passive：事件的默认行为立即执行，无需等待事件回调执行完毕（尤其能够提升移动端的性能）；比如：wheel事件 事件修饰符可以连续使用：<a href=“http://www.baidu.com” @click.prevent.self=“sum”>百度 一下
### 按键修饰符 1. Vue中常用的按键别名 * 回车 => enter * 删除 => delete (捕获“删除”和“退格”键) * 退出 => esc * 空格 => space * 换行 => tab (特殊，必须配合keydown去使用，keyup不起作用) * 上 => up * 下 => down * 左 => left * 右 => right<input @keydown.enter=“keyClick”>
2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）<input @keydown.caps-lock=“keyClick”>
3. 特殊的系统修饰键：ctrl、alt、shift、meta * 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。 * 配合keydown使用：正常触发事件。<input @keydown.ctrl.y=“keyClick”>
4. 也可以使用keyCode去指定具体的按键（不推荐） 5. Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名<input @keydown.huiche=“keyClick”>
### `.exact` 修饰符 `.exact` 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。<button @click.ctrl=“onClick”>A
<button @click.ctrl.exact=“onCtrlClick”>A
<button @click.exact=“onClick”>A
### 鼠标按键修饰符 * `.left` * `.right` * `.middle` 这些修饰符将处理程序限定为由特定鼠标按键触发的事件。 ## 计算属性 computed 模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。比如现计算成绩的案例。 ### 插值语法实现语文：
模板中绑定的数据如果是一个属性，则可以直接绑定属性名。 模板中绑定的数据如果是一个需要通过data中的数据计算得来的值，对于简单的计算，可以直接绑定一个表达式，而对于复杂的计算，无法通过一个简单的表达式算出结果的计算，则需要将计算的过程写成一个函数放入methods，然后绑定这个函数调用的表达式。 ### methods实现 methods的函数，每使用一次就会调用一次语文：
总分：{{total()}}
等级：{{result()}}
### 计算属性computed实现 组件的计算属性，当模板中绑定的数据是通过data中的数据计算得出的数据时，可以将计算函数写入计算属性，在模板中就可以直接绑定这个属性。 computed和methods相比： * methods的函数，在模板中使用一次就会调用一次 * computed的计算属性：当计算属性中所依赖的属性值发生变化时，才会重新调用函数计算，否则使用上一次计算缓存的结果。所以，如果一个运算比较耗费性能且需要使用多次，建议用computed语文：
总分：{{total}}
结果：{{result}}
### 计算属性的setter和getter 普通的计算属性只有getter函数，只能获取计算属性的值。想要修改计算属的值，就要给计算属性添加setter函数。bigNum1 = {{bigNum1}}
bigNum2 = {{bigNum2}}
count = {{count}}
### 总结 计算属性：要用的属性依赖data中已有属性计算得来。 原理：底层借助了Objcet.defineproperty方法提供的getter和setter。 get函数什么时候执行？ * 初次读取时会执行一次。 * 当依赖的数据发生改变时会被再次调用。 优势：与methods实现相比，内部有缓存机制（复用）多次使用，使用上一次缓存的结果，效率更高，调试方便。 说明： * 计算属性最终会出现在vue实例上，直接读取使用即可。 * 如果计算属性要被修改，那必须写setter函数去响应修改，且setter中要引起计算时依赖的数据发生改变。 ### 最佳实践 #### Getter 不应有副作用 计算属性的 getter 应只做计算而没有任何其他的副作用，这一点非常重要，请务必牢记。举例来说，**不要在 getter 中做异步请求或者更改 DOM**！一个计算属性的声明中描述的是如何根据其他值派生一个值。因此 getter 的职责应该仅为计算和返回该值。在之后的指引中我们会讨论如何使用监听器根据其他响应式状态的变更来创建副作用。 #### 避免直接修改计算属性值 从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”，每当源状态发生变化时，就会创建一个新的快照。更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。 ## 监听属性 watch watch可以监听data中的属性，也能监听computed的计算属性。data中的数据如下：data: {
num:10,
count: 100,
zhangsan:{
name:‘张三’,
age: 12,
}
}### 添加监听 监听data中的num属性，回调函数有两个参数，newVal是变量改变之后的值，oldVal是变量改变之前的值。watch: {
num(newVal, oldVal){
console.log(‘num的值发生了变化：’+this.num);
},
}一些场景可以根据newVal和oldVal的差值得到计算的结果，比如计算温度差。 ### 立即监听 添加 handler方法和immediate属性实现立即监听。 watch 的一个特点是，最初绑定的时候是不会执行的，要等到所监听的值发生改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行该怎么办呢？watch 代码如下：watch: {
count: {
handler(newVal, oldVal) {
console.log(‘count的值发生了变化：’+this.count);
},
// 代表在wacth里声明了count 之后立即先去执行handler方法
immediate: true
}
}当我们给 count 绑定了一个handler方法，Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。 而immediate:true代表如果在 wacth 里声明了 count之后，就会立即先去执行里面的handler方法，如果为 false就不会在绑定的时候就执行。 ### 深度监听 watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听，比如我们 data 里有一个zhangsan属性： 默认情况下 handler 只监听zhangsan这个属性它的引用的变化。zhangsan属性的引用地址发生变化，也就是直接给zhangsan对象赋值的时候它才会监听到。 如果我们需要监听zhangsan里的属性age的值呢？这时候deep属性就派上用场了！watch: {
zhangsan: {
handler(newVal, oldVal) {
console.log(‘zhangsan changed :’,this.zhangsan);
},
immediate: true,
deep: true
},
}#### 深度监听的问题 deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改zhangsan里面任何一个属性都会触发这个监听器里的 handler。 #### 深度监听的优化watch: {
‘zhangsan.age’: {
handler(newVal, oldVal) {
console.log(‘zhangsan.age changed :’,this.zhangsan.age);
},
immediate: true,
deep: true
}
}这样Vue.js才会一层一层解析下去，直到遇到属性age，然后才给age设置监听函数。 ### this.$watch() 我们也可以使用组件实例的 `$watch()` 方法来命令式地创建一个侦听器：created() {
this.$watch(‘question’, (newQuestion) => {
// …
})
}如果要在特定条件下设置一个侦听器，或者只侦听响应用户交互的内容，这方法很有用。它还允许你提前停止该侦听器。 ### 注销watch 为什么要注销 watch？ 因为我们的组件是经常要被销毁的，比如我们跳一个路由，从一个页面跳到另外一个页面，那么原来的页面的 watch 其实就没用了，这时候我们应该注销掉原来页面的 watch 的，不然的话可能会导致内置溢出。 #### 自动注销 好在我们平时 watch 都是写在组件的选项中的，他会随着组件的销毁而销毁。 #### 手动注销 如果我们使用下面这样的方式写 watch，那么就要手动注销了const unWatch = app.KaTeX parse error: Expected '}', got 'EOF' at end of input: … console.log(`{newVal} : ${oldVal}`);
})unWatch(); // 手动注销watch
app.$watch调用后会返回一个值，就是unWatch方法，你要注销 watch 只要调用unWatch方法就可以了。 ### watch监听路由watch: {
$route(to,from){
console.log(to); //to表示去往的界面
console.log(from); //from表示来自于哪个界面
if (to.path==“/home”) {
console.log(“主页”);
}
}
},### 注意不要滥用watch 下面代码是命令式且重复的。将它与计算属性的版本进行比较：语文：
总分：{{total}}
结果：{{result}}
### computed 和 watch 的区别和运用的场景？ computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值； watch：没有缓存性，更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。 运用场景： * 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算； * 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用watch选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。 computed和watch之间的区别： * computed：当一个属性受多个属性影响的时候就需要用到computed。例子： 购物车商品结算的时候 * computed能完成的功能，watch都可以完成。 * watch：当一条数据影响多条数据的时候就需要用watch。例子：搜索数据 * watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。 ## class 与 style 绑定 数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 `class` 和 `style` 都是 attribute，我们可以和其他 attribute 一样使用 `v-bind` 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 `class` 和 `style` 的 `v-bind` 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。 ### class绑定 class取值可以是字符串、对象、数组。 **情况一**：字符串写法适用于：绑定单个类名，类名取值不确定，要动态获取。 class取值为字符串，使用一个data中的属性，记录class名，变化name属性的值，类名变化，实现动态的类名**情况二**：数组写法适用于：要绑定多个类名，个数不确定，名字也不确定。 class的取值为数组时，把数组中每个元素的值作为样式类添加，控制数组元素的变化，实现动态的类名这是一段话
**情况三**： 对象写法适用于：要绑定多个类名，个数确定，名字也确定，但不确定用不用。 当class取值为对象时:{key:value,…}，则这个对象的key是class名字，值是一个布尔值，true表示添加这个class名字，false则不添加这个class名字，控制对象属性值的变化，实现动态类名。这是一段话
对象和数组也可以混合使用这是一段话
### style样式 style的取值：object 或者 array * :style=“{key:value,…}”，对象的键key表示样式名，键的值value表示样式值。 * :style="[styleObj1, styleObj2]"其中styleObj1、styleObj2是样式对象。 :style 内联样式绑定到对象类型的值{key:value,…}，对象的键key表示样式名，键的值value表示样式值。hello vue
实例：这是一段话
这是一段话
这是一段话
hello vue
hello vue
扫一扫
468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
