整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
ue 中需要輸入什么內容的時候，自然會想到使用 <input v-model="xxx" /> 的方式來實現雙向綁定。下面是一個最簡單的示例
<div id="app">
<h2>What's your name:</h2>
<input v-model="name" />
<div>Hello {{ name }}</div>
</div>
new Vue({
el: "#app",
data: {
name: ""
}
});
JsFiddle 演示
https://jsfiddle.net/0okxhc6f/
在這個示例的輸入框中輸入的內容，會隨后呈現出來。這是 Vue 原生對 <input> 的良好支持，也是一個父組件和子組件之間進行雙向數據傳遞的典型示例。不過 v-model 是 Vue 2.2.0 才加入的一個新功能，在此之前，Vue 只支持單向數據流。
Vue 的單向數據流
Vue 的單向數據流和 React 相似，父組件可以通過設置子組件的屬性（Props）來向子組件傳遞數據，而父組件想獲得子組件的數據，得向子組件注冊事件，在子組件高興的時候觸發這個事件把數據傳遞出來。一句話總結起來就是，Props 向下傳遞數據，事件向上傳遞數據。
上面那個例子，如果不使用 v-model，它應該是這樣的
<input :value="name" @input="name=$event.target.value" />
由于事件處理寫成了內聯模式，所以腳本部分不需要修改。但是多數情況下，事件一般都會定義成一個方法，代碼就會復雜得多
<input :value="name" @input="updateName" />
new Vue({
// ....
methods: {
updateName(e) {
this.name=e.target.value;
}
}
})
從上面的示例來看 v-model 節約了不少代碼，最重要的是可以少定義一個事件處理函數。所以 v-model 實際干的事件包括
自定義組件的 v-model
Vue 對原生組件進行了封裝，所以 <input> 在輸入的時候會觸發 input 事件。但是自定義組件應該怎么呢？這里不妨借助 JsFiddle Vue 樣板的 Todo List 示例。
JsFiddle 的 Vue 樣板
點擊 JsFilddle 的 Logo，在上面彈出面板中選擇 Vue 樣板即可
樣板代碼包含 HTML 和 Vue(js) 兩個部分，代碼如下：
<div id="app">
<h2>Todos:</h2>
<ol>
<li v-for="todo in todos">
<label>
<input type="checkbox"
v-on:change="toggle(todo)"
v-bind:checked="todo.done">
<del v-if="todo.done">
{{ todo.text }}
</del>
<span v-else>
{{ todo.text }}
</span>
</label>
</li>
</ol>
</div>
new Vue({
el: "#app",
data: {
todos: [
{ text: "Learn JavaScript", done: false },
{ text: "Learn Vue", done: false },
{ text: "Play around in JSFiddle", done: true },
{ text: "Build something awesome", done: true }
]
},
methods: {
toggle: function(todo){
todo.done=!todo.done
}
}
})
定義 Todo 組件
JsFiddle 的 Vue 模板默認實現一個 Todo 列表的展示，數據是固定的，所有內容在一個模板中完成。我們首先要做事情是把單個 Todo 改成一個子組件。因為在 JsFiddle 中不能寫成多文件的形式，所以組件使用 Vue.component() 在腳本中定義，主要是把 <li> 內容中的那部分拎出來：
Vue.component("todo", {
template: `
<label>
<input type="checkbox" @change="toggle" :checked="isDone">
<del v-if="isDone">
{{ text }}
</del>
<span v-else>
{{ text }}
</span>
</label>
`,
props: ["text", "done"],
data() {
return {
isDone: this.done
};
},
methods: {
toggle() {
this.isDone=!this.isDone;
}
}
});
原來定義在 App 中的 toggle() 方法也稍作改動，定義在組件內了。toggle() 調用的時候會修改表示是否完成的 done 的值。但由于 done 是定義在 props 中的屬性，不能直接賦值，所以采用了官方推薦的第一種方法，定義一個數據 isDone，初始化為 this.done，并在組件內使用 isDone 來控制是否完成這一狀態。
相應的 App 部分的模板和代碼精減了不少：
<div id="app">
<h2>Todos:</h2>
<ol>
<li v-for="todo in todos">
<todo :text="todo.text" :done="todo.done"></todo>
</li>
</ol>
</div>
new Vue({
el: "#app",
data: {
todos: [
{ text: "Learn JavaScript", done: false },
{ text: "Learn Vue", done: false },
{ text: "Play around in JSFiddle", done: true },
{ text: "Build something awesome", done: true }
]
}
});
JsFiddle 演示
https://jsfiddle.net/0okxhc6f/1/
不過到此為止，數據仍然是單向的。從效果上來看，點擊復選框可以反饋出刪除線線效果，但這些動態變化都是在 todo 組件內部完成的，不存在數據綁定的問題。
為 Todo List 添加計數
為了讓 todo 組件內部的狀態變化能在 Todo List 中呈現出來，我們在 Todo List 中添加計數，展示已經完成的 Todo 數量。因為這個數量受 todo 組件內部狀態（數據）的影響，這就需要將 todo 內部數據變化反應到其父組件中，這才有 v-model 的用武之地。
這個數量我們在標題中以 n/m 的形式呈現，比如 2/4 表示一共 4 條 Todo，已經完成 2 條。這需要對 Todo List 的模板和代碼部分進行修改，添加 countDone 和 count 兩個計算屬性：
<div id="app">
<h2>Todos ({{ countDone }}/{{ count }}):</h2>
<!-- ... -->
</div>
new Vue({
// ...
computed: {
count() {
return this.todos.length;
},
countDone() {
return this.todos.filter(todo=> todo.done).length;
}
}
});
現在計數呈現出來了，但是現在改變任務狀態并不會對這個計數產生影響。我們要讓子組件的變動對父組件的數據產生影響。v-model 待會兒再說，先用最常見的方法，事件：
Vue.component("todo", {
//...
methods: {
toggle(e) {
this.isDone=!this.isDone;
this.$emit("toggle", this.isDone);
}
}
});
<!-- #app 中其它代碼略 -->
<todo :text="todo.text" :done="todo.done" @toggle="todo.done=$event"></todo>
這里為 @toggle 綁定的是一個表達式。因為這里的 todo 是一個臨時變量，如果在 methods 中定義專門的事件處理函數很難將這個臨時變量綁定過去（當然定義普通方法通過調用的形式是可以實現的）。
事件處理函數，一般直接對應于要處理的事情，比如定義 onToggle(e)，綁定為 @toggle="onToggle"。這種情況下不能傳入 todo 作為參數。
普通方法，可以定義成 toggle(todo, e)，在事件定義中以函數調用表達式的形式調用：@toggle="toggle(todo, $event)"。它和todo.done=$event` 同屬表達式。
注意二者的區別，前者是綁定的處理函數（引用），后者是綁定的表達式（調用）
現在通過事件方式已經達到了預期效果
** Js Fiddle 演示 **
https://jsfiddle.net/0okxhc6f/2/
改造成 v-model
之前我們說了要用 v-model 實現的，現在來改造一下。注意實現 v-model 的幾個要素
Vue.component("todo", {
// ...
props: ["text", "value"], // <-- 注意 done 改成了 value
data() {
return {
isDone: this.value // <-- 注意 this.done 改成了 this.value
};
},
methods: {
toggle(e) {
this.isDone=!this.isDone;
this.$emit("input", this.isDone); // <-- 注意事件名稱變了
}
}
});
<!-- #app 中其它代碼略 -->
<todo :text="todo.text" v-model="todo.done"></todo>
.sync 實現其它數據綁定
前面講到了 Vue 2.2.0 引入 v-model 特性。由于某些原因，它的輸入屬性是 value，但輸出事件叫 input。v-model、value、input 這三個名稱從字面上看不到半點關系。雖然這看起來有點奇葩，但這不是重點，重點是一個控件只能雙向綁定一個屬性嗎？
Vue 2.3.0 引入了 .sync 修飾語用于修飾 v-bind（即 :），使之成為雙向綁定。這同樣是語法糖，添加了 .sync 修飾的數據綁定會像 v-model 一樣自動注冊事件處理函數來對被綁定的數據進行賦值。這種方式同樣要求子組件觸發特定的事件。不過這個事件的名稱好歹和綁定屬性名有點關系，是在綁定屬性名前添加 update: 前綴。
比如 <sub :some.sync="any" /> 將子組件的 some 屬性與父組件的 any 數據綁定起來，子組件中需要通過 $emit("update:some", value) 來觸發變更。
上面的示例中，使用 v-model 綁定始終感覺有點別扭，因為 v-model 的字面意義是雙向綁定一個數值，而表示是否未完成的 done 其實是一個狀態，而不是一個數值。所以我們再次對其進行修改，仍然使用 done 這個屬性名稱（而不是 value），通過 .sync 來實現雙向綁定。
Vue.component("todo", {
// ...
props: ["text", "done"], // <-- 恢復成 done
data() {
return {
isDone: this.done // <-- 恢復成 done
};
},
methods: {
toggle(e) {
this.isDone=!this.isDone;
this.$emit("update:done", this.isDone); // <-- 事件名稱：update:done
}
}
});
<!-- #app 中其它代碼略 -->
<!-- 注意 v-model 變成了 :done.sync，別忘了冒號喲 -->
<todo :text="todo.text" :done.sync="todo.done"></todo>
** Js Fiddle 演示 **
https://jsfiddle.net/0okxhc6f/3/
揭密 Vue 雙向綁定
通過上面的講述，我想大家應該已經明白了 Vue 的雙向綁定其實就是普通單向綁定和事件組合來完成的，只不過通過 v-model 和 .sync 注冊了默認的處理函數來更新數據。Vue 源碼中有這么一段
// @file: src/compiler/parser/index.js
if (modifiers.sync) {
addHandler(
el,
`update:${camelize(name)}`,
genAssignmentCode(value, `$event`)
)
}
從這段代碼可以看出來，.sync 雙向綁定的時候，編譯器會添加一個 update:${camelize(name)} 的事件處理函數來對數據進行賦值（genAssignmentCode 的字面意思是生成賦值的代碼）。
展望
目前 Vue 的雙向綁定還需要通過觸發事件來實現數據回傳。這和很多所的期望的賦值回傳還是有一定的差距。造成這一差距的主要原因有兩個
在現在的 Vue 版本中，可以通過定義計算屬性來實現簡化，比如
computed: {
isDone: {
get() {
return this.done;
},
set(value) {
this.$emit("update:done", value);
}
}
}
說實在的，要多定義一個意義相同名稱不同的變量名也是挺費腦筋的。希望 Vue 在將來的版本中可以通過一定的技術手段減化這一過程，比如為屬性（Prop）聲明添加 sync 選項，只要聲明 sync: true 的都可以直接賦值并自動觸發 update:xxx 事件。
當然作為一個框架，在解決一個問題的時候，還要考慮對其它特性的影響，以及框架的擴展性等問題，所以最終雙向綁定會演進成什么樣子，我們對 Vue 3.0 拭目以待。
組件是 vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數據無法相互引用。一般來說，組件可以有以下幾種關系：
如上圖所示，A 和 B、B 和 C、B 和 D 都是父子關系，C 和 D 是兄弟關系，A 和 C 是隔代關系（可能隔多代）。
針對不同的使用場景，如何選擇行之有效的通信方式？這是我們所要探討的主題。本文總結了vue組件間通信的幾種方式，如props、$emit/$on、vuex、$parent / $children、$attrs/$listeners和provide/inject，以通俗易懂的實例講述這其中的差別及使用場景，希望對小伙伴有些許幫助。
父組件A通過props的方式向子組件B傳遞，B to A 通過在 B 組件中 $emit, A 組件中 v-on 的方式實現。
1.父組件向子組件傳值
接下來我們通過一個例子，說明父組件如何向子組件傳遞值：在子組件Users.vue中如何獲取父組件App.vue中的數據 users:["Henry","Bucky","Emily"]
//App.vue父組件
<template>
<div id="app">
<users v-bind:users="users"></users>//前者自定義名稱便于子組件調用，后者要傳遞數據名
</div>
</template>
<script>
import Users from "./components/Users"
export default {
name: 'App',
data(){
return{
users:["Henry","Bucky","Emily"]
}
},
components:{
"users":Users
}
}
//users子組件
<template>
<div class="hello">
<ul>
<li v-for="user in users">{{user}}</li>//遍歷傳遞過來的值，然后呈現到頁面
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props:{
users:{ //這個就是父組件中子標簽自定義名字
type:Array,
required:true
}
}
}
</script>
總結：父組件通過props向下傳遞數據給子組件。注：組件中的數據共有三種形式：data、props、computed
2.子組件向父組件傳值（通過事件形式）
接下來我們通過一個例子，說明子組件如何向父組件傳遞值：當我們點擊“Vue.js Demo”后，子組件向父組件傳遞值，文字由原來的“傳遞的是一個值”變成“子向父組件傳值”，實現子組件向父組件值的傳遞。
// 子組件
<template>
<header>
<h1 @click="changeTitle">{{title}}</h1>//綁定一個點擊事件
</header>
</template>
<script>
export default {
name: 'app-header',
data() {
return {
title:"Vue.js Demo"
}
},
methods:{
changeTitle() {
this.$emit("titleChanged","子向父組件傳值");
//自定義事件 傳遞值“子向父組件傳值”
}
}
}
</script>
// 父組件
<template>
<div id="app">
<app-header v-on:titleChanged="updateTitle" ></app-header>
//與子組件titleChanged自定義事件保持一致
// updateTitle($event)接受傳遞過來的文字
<h2>{{title}}</h2>
</div>
</template>
<script>
import Header from "./components/Header"
export default {
name: 'App',
data(){
return{
title:"傳遞的是一個值"
}
},
methods:{
updateTitle(e){ //聲明這個函數
this.title=e;
}
},
components:{
"app-header":Header,
}
}
</script>
總結：子組件通過events給父組件發送消息，實際上就是子組件把自己的數據發送到父組件。
這種方法通過一個空的Vue實例作為中央事件總線（事件中心），用它來觸發事件和監聽事件,巧妙而輕量地實現了任何組件間的通信，包括父子、兄弟、跨級。當我們的項目比較大時，可以選擇更好的狀態管理解決方案vuex。
1.具體實現方式：
var Event=new Vue();
Event.$emit(事件名,數據);
Event.$on(事件名,data=> {});
2.舉個例子
假設兄弟組件有三個，分別是A、B、C組件，C組件如何獲取A或者B組件的數據
<div id="itany">
<my-a></my-a>
<my-b></my-b>
<my-c></my-c>
</div>
<template id="a">
<div>
<h3>A組件：{{name}}</h3>
<button @click="send">將數據發送給C組件</button>
</div>
</template>
<template id="b">
<div>
<h3>B組件：{{age}}</h3>
<button @click="send">將數組發送給C組件</button>
</div>
</template>
<template id="c">
<div>
<h3>C組件：{{name}}，{{age}}</h3>
</div>
</template>
<script>
var Event=new Vue();//定義一個空的Vue實例
var A={
template: '#a',
data() {
return {
name: 'tom'
}
},
methods: {
send() {
Event.$emit('data-a', this.name);
}
}
}
var B={
template: '#b',
data() {
return {
age: 20
}
},
methods: {
send() {
Event.$emit('data-b', this.age);
}
}
}
var C={
template: '#c',
data() {
return {
name: '',
age: ""
}
},
mounted() {
//在模板編譯完成后執行
Event.$on('data-a',name=> {
this.name=name;
//箭頭函數內部不會產生新的this，這邊如果不用=>,this指代Event
})
Event.$on('data-b',age=> {
this.age=age;
})
}
}
var vm=new Vue({
el: '#itany',
components: {
'my-a': A,
'my-b': B,
'my-c': C
}
});
</script>
$on 監聽了自定義事件 data-a和data-b，因為有時不確定何時會觸發事件，一般會在 mounted 或 created 鉤子中來監聽。
1.簡要介紹Vuex原理
Vuex實現了一個單向數據流，在全局擁有一個State存放數據，當組件要更改State中的數據時，必須通過Mutation進行，Mutation同時提供了訂閱者模式供外部插件調用獲取State數據的更新。而當所有異步操作(常見于調用后端接口異步獲取更新數據)或批量的同步操作需要走Action，但Action也是無法直接修改State的，還是需要通過Mutation來修改State的數據。最后，根據State的變化，渲染到視圖上。
2.簡要介紹各模塊在流程中的功能：
3.Vuex與localStorage
vuex 是 vue 的狀態管理器，存儲的數據是響應式的。但是并不會保存起來，刷新之后就回到了初始狀態，具體做法應該在vuex里數據改變的時候把數據拷貝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的數據，取出來再替換store里的state。
let defaultCity="上海"
try { // 用戶關閉了本地存儲功能，此時在外層加個try...catch
if (!defaultCity){
defaultCity=JSON.parse(window.localStorage.getItem('defaultCity'))
}
}catch(e){}
export default new Vuex.Store({
state: {
city: defaultCity
},
mutations: {
changeCity(state, city) {
state.city=city
try {
window.localStorage.setItem('defaultCity', JSON.stringify(state.city));
// 數據改變的時候把數據拷貝一份保存到localStorage里面
} catch (e) {}
}
}
})
這里需要注意的是：由于vuex里，我們保存的狀態，都是數組，而localStorage只支持字符串，所以需要用JSON轉換：
JSON.stringify(state.subscribeList); // array -> string
JSON.parse(window.localStorage.getItem("subscribeList")); // string -> array
1.簡介
多級組件嵌套需要傳遞數據時，通常使用的方法是通過vuex。但如果僅僅是傳遞數據，而不做中間處理，使用 vuex 處理，未免有點大材小用。為此Vue2.4 版本提供了另一種方法----$attrs/$listeners
接下來我們看個跨級通信的例子：
// index.vue
<template>
<div>
<h2>浪里行舟</h2>
<child-com1
:foo="foo"
:boo="boo"
:coo="coo"
:doo="doo"
title="前端工匠"
></child-com1>
</div>
</template>
<script>
const childCom1=()=> import("./childCom1.vue");
export default {
components: { childCom1 },
data() {
return {
foo: "Javascript",
boo: "Html",
coo: "CSS",
doo: "Vue"
};
}
};
</script>
// childCom1.vue
<template class="border">
<div>
<p>foo: {{ foo }}</p>
<p>childCom1的$attrs: {{ $attrs }}</p>
<child-com2 v-bind="$attrs"></child-com2>
</div>
</template>
<script>
const childCom2=()=> import("./childCom2.vue");
export default {
components: {
childCom2
},
inheritAttrs: false, // 可以關閉自動掛載到組件根元素上的沒有在props聲明的屬性
props: {
foo: String // foo作為props屬性綁定
},
created() {
console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
}
};
</script>
// childCom2.vue
<template>
<div class="border">
<p>boo: {{ boo }}</p>
<p>childCom2: {{ $attrs }}</p>
<child-com3 v-bind="$attrs"></child-com3>
</div>
</template>
<script>
const childCom3=()=> import("./childCom3.vue");
export default {
components: {
childCom3
},
inheritAttrs: false,
props: {
boo: String
},
created() {
console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
}
};
</script>
// childCom3.vue
<template>
<div class="border">
<p>childCom3: {{ $attrs }}</p>
</div>
</template>
<script>
export default {
props: {
coo: String,
title: String
}
};
</script>
如上圖所示$attrs表示沒有繼承數據的對象，格式為{屬性名：屬性值}。Vue2.4提供了$attrs , $listeners 來傳遞數據與事件，跨級組件之間的通訊變得更簡單。簡單來說：$attrs與$listeners 是兩個對象，$attrs 里存放的是父組件中綁定的非 Props 屬性，$listeners里存放的是父組件中綁定的非原生事件。
1.簡介
Vue2.2.0新增API,這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關系成立的時間里始終生效。一言而蔽之：祖先組件中通過provider來提供變量，然后在子孫組件中通過inject來注入變量。 provide / inject API 主要解決了跨級組件間的通信問題，不過它的使用場景，主要是子組件獲取上級組件的狀態，跨級組件間建立了一種主動提供與依賴注入的關系。
2.舉個例子
假設有兩個組件： A.vue 和 B.vue，B 是 A 的子組件
// A.vue
export default {
provide: {
name: '浪里行舟'
}
}
// B.vue
export default {
inject: ['name'],
mounted () {
console.log(this.name); // 浪里行舟
}
}
可以看到，在 A.vue 里，我們設置了一個 provide: name，值為 浪里行舟，它的作用就是將 name 這個變量提供給它的所有子組件。而在 B.vue 中，通過 inject 注入了從 A 組件中提供的 name 變量，那么在組件 B 中，就可以直接通過 this.name 訪問這個變量了，它的值也是浪里行舟。這就是 provide / inject API 最核心的用法。
需要注意的是：provide 和 inject 綁定并不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的對象，那么其對象的屬性還是可響應的----vue官方文檔 所以，上面 A.vue 的 name 如果改變了，B.vue 的 this.name 是不會改變的，仍然是 浪里行舟。
3.provide與inject 怎么實現數據響應式
一般來說，有兩種辦法：
我們來看個例子：孫組件D、E和F獲取A組件傳遞過來的color值，并能實現數據響應式變化，即A組件的color變化后，組件D、E、F不會跟著變（核心代碼如下：）
// A 組件
<div>
<h1>A 組件</h1>
<button @click="()=> changeColor()">改變color</button>
<ChildrenB />
<ChildrenC />
</div>
......
data() {
return {
color: "blue"
};
},
// provide() {
// return {
// theme: {
// color: this.color //這種方式綁定的數據并不是可響應的
// } // 即A組件的color變化后，組件D、E、F不會跟著變
// };
// },
provide() {
return {
theme: this//方法一：提供祖先組件的實例
};
},
methods: {
changeColor(color) {
if (color) {
this.color=color;
} else {
this.color=this.color==="blue" ? "red" : "blue";
}
}
}
// 方法二:使用2.6最新API Vue.observable 優化響應式 provide
// provide() {
// this.theme=Vue.observable({
// color: "blue"
// });
// return {
// theme: this.theme
// };
// },
// methods: {
// changeColor(color) {
// if (color) {
// this.theme.color=color;
// } else {
// this.theme.color=this.theme.color==="blue" ? "red" : "blue";
// }
// }
// }
// F 組件
<template functional>
<div class="border2">
<h3 :style="{ color: injections.theme.color }">F 組件</h3>
</div>
</template>
<script>
export default {
inject: {
theme: {
//函數式組件取值不一樣
default: ()=> ({})
}
}
};
</script>
雖說provide 和 inject 主要為高階插件/組件庫提供用例，但如果你能在業務中熟練運用，可以達到事半功倍的效果！
需要注意的是：這兩種都是直接得到組件實例，使用后可以直接調用組件的方法或訪問數據。我們先來看個用 ref來訪問組件的例子：
// component-a 子組件
export default {
data () {
return {
title: 'Vue.js'
}
},
methods: {
sayHello () {
window.alert('Hello');
}
}
}
// 父組件
<template>
<component-a ref="comA"></component-a>
</template>
<script>
export default {
mounted () {
const comA=this.$refs.comA;
console.log(comA.title); // Vue.js
comA.sayHello(); // 彈窗
}
}
</script>
不過，這兩種方法的弊端是，無法在跨級或兄弟間通信。
// parent.vue <component-a></component-a> <component-b></component-b> <component-b></component-b>
我們想在 component-a 中，訪問到引用它的頁面中（這里就是 parent.vue）的兩個 component-b 組件，那這種情況下，就得配置額外的插件或工具了，比如 Vuex 和 Bus 的解決方案。
常見使用場景可以分為三類：
這個看顏值的時代，美，真的太重要了。為了方便CSS美好HTML的美，Vue3.0特意提供了操作元素的class和內聯樣式的指令。因為它們都是元素，所以我們可以用v-bind進行處理。
由于字符串拼接麻煩且易錯，所有Vue3.0在v-bind用于class和 style時，做了專門的增強，表達式結果的類型除了字符串之外，還可以是對象或數組。
Vue用v-bind:class(簡寫為:class)指令，用于解決動態切換class的需求。如果你不清楚用在什么哪方面的需求，就想一下提示信息的應用，在錯誤發生時，用紅色字體，否則用綠色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0 class指令</title>
<script src="vue.global.js"></script>
<style>
.b {
font-weight: bold;
}
.error {
color: red;
}
</style>
</head>
<body>
<span id="app">
<h1 class="b" :class="{ 'error': hasError }">老陳帥不？
如果你說不帥，我就用紅色字體，亮瞎你的眼。</h1>
</span>
<script>
Vue.createApp({
data() {
return {
hasError: true
}
}
}).mount("#app")
</script>
</body>
</html>渲染結果(生成的代碼)
<h1 class="b error">老陳帥不？ 如果你說不帥，我就用紅色字體，亮瞎你的眼。</h1>輸出結果
如果你想同時滿足多個class，你可以用class的數組語法。這個語法，可讀性更強一些。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0 class指令</title>
<script src="vue.global.js"></script>
<style>
.b {
font-weight: bold;
}
.big-text {
font-size: 60px;
}
.error {
color: red;
}
</style>
</head>
<body>
<span id="app">
<p class="b" :class="[fontSize, errorInfo]">
程序員<br/>
除了會編程之外，還會什么？<br/>
當然是敲代碼了。
</p>
</span>
<script>
Vue.createApp({
data() {
return {
fontSize: 'big-text',
errorInfo: 'error'
}
}
}).mount("#app")
</script>
</body>
</html>渲染結果(生成的代碼)
<span id="app"><p class="b big-text error"> 程序員<br>
除了會編程之外，還會什么？<br> 當然是敲代碼了。 </p></span>輸出結果
如果你糾結該用紅色字體表明不帥，還是用藍色字體表明帥的話，那你可以用三元表達式，根據條件切換列表中的class。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0 class指令</title>
<script src="vue.global.js"></script>
<style>
.b {
font-weight: bold;
font-size: 50px;
}
.yes {
color: #008CBA;
}
.no {
color: red;
}
</style>
</head>
<body>
<span id="app">
<p class="b" :class="[isCool ? 'yes' :'no']">
老陳帥不？帥的，藍色字體代表我的心。
</p>
</span>
<script>
Vue.createApp({
data() {
return {
isCool: true
}
}
}).mount("#app")
</script>
</body>
</html>輸出結果
在HTML中，在元素上用style的話，結果是不可改變的，為此Vue3.0加上了:style指令。注意，你別看這個指令看起來十分直觀，看著非常像CSS，但其實是一個 JavaScript 對象來的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0 style指令</title>
<script src="vue.global.js"></script>
</head>
<body>
<span id="app">
<p :style="{ color: textColor, fontSize: fontSize + 'px' }">
程序員，除了你之外，都是美的，哈哈~
</p>
</span>
<script>
Vue.createApp({
data() {
return {
textColor: '#008CBA',
fontSize: 50
}
}
}).mount("#app")
</script>
</body>
</html>輸出結果
如果你覺得這種方式不好，傷了你的心，那你可以用樣式對象的方式。這樣的寫法，是不是更舒服了一些，輸出結果和上面是一模一樣的。
<span id="app">
<p :style="styleOj">
程序員，除了你之外，都是美的，哈哈~
</p>
</span>
<script>
Vue.createApp({
data() {
return {
styleOj: {
color: '#008CBA',
fontSize: '50px'
}
}
}
}).mount("#app")
</script>既然class可以用數組語法，:style當然也可以。:style的數組語法可以將多個樣式對象應用到同一個元素上。輸出結果和上面的還是一樣的，我就不重復粘貼了。
<span id="app">
<p :style="[textColor, fontSize]">
程序員，除了你之外，都是美的，哈哈~
</p>
</span>
<script>
Vue.createApp({
data() {
return {
textColor: {
color: '#008CBA',
},
fontSize: {
'font-size': '50px'
}
}
}
}).mount("#app")
</script>好了，有關Vue3.0樣式綁定的內容，老陳講完了，如果覺得對你有所幫助，希望老鐵能轉發點贊，讓更多的人看到這篇文章。你的轉發和點贊，就是對老陳繼續創作和分享最大的鼓勵。
一個當了10年技術總監的老家伙，分享多年的編程經驗。想學編程的朋友，可關注：老陳說編程。我在分享Python，前端、Java和App方面的干貨。關注我，沒錯的。
#前端##Vue.js##程序員##Web##JavaScript#
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
