29. 模板資料細節說明
在一個 HTML 的 <input> 標籤內加入以下屬性，即可更動儲存在 Vue 裡面的資料：
<input v-model="（Vue 物件名稱）">在 HTML 文件放上內含 Vue 物件的花括號（{{}}）就可在 HTML 文件上渲染出 Vue 物件內所包含的內容。
若要透過 Vue 在 HTML 內顯示 HTML 標籤，則必須在一個 HTML 元素上套用以下屬性：
<p v-html="（Vue 物件名稱）"></p>注意！v-html 能夠使用 XSS 攻擊，因此，不要在提供給使用者輸入的地方使用這個屬性。
若要讓 Vue 只在畫面上渲染一次，則可以在指定的 HTML 元素內加入以下指令：
v-once花括號內可以撰寫 JavaScript 的表達式，例如：
{{ text + rawHTML }}這樣撰寫時，就會同時把 Vue 物件內的 text 跟 rawHTML 一起輸出成一段字串。
或是要反轉 Vue 物件內儲存的字串資料，可以這樣撰寫：
{{ text.split('').reverse().join('') }}如果要針對數字進行四則運算，則可以這樣撰寫：
{{ Number1 + Number2 }} //加
{{ Number1 - Number2 }} //減
{{ Number1 * Number2 }} //乘
{{ Number1 / Number2 }} //除
......30. 動態切換 ClassName 及 Style 多種方法
使用行內物件的方式來為一個 HTML 元素加入 Class：
:class=”{‘（要加入的 Class）’ : （判斷式） }”加入多個 Class：
:class=”{‘（要加入的 Class）’ : （判斷式）, ‘（要加入的 Class）’ : （判斷式）, ‘（要加入的 Class）’ : （判斷式）}”要使用 Vue 物件的方式來為一個 HTML 元素加入 Class，則必須在 Vue 應用程式內宣告一個物件，並在裡面存放預先寫好的 Class 名稱，範例如下：
objectClass: {
rotate: false,
"bg-danger": false,
}接著，若要使用按鈕元素（ <button> ）來切換是否套用 class 到指定的 HTML 元素上，則可以在該按鈕元素內加入以下屬性：
@click="objectClass.rotate = !objectClass.rotate"這樣在每次點擊該按鈕元素時都會切換 objectClass 物件內的 rotate 的狀態為 true 或 false。
若要使用輸入欄位元素（ <input> ）來切換是否套用 class 到指定的 HTML 元素上，則可以在該輸入欄位元素內加入以下屬性：
v-model="objectClass['bg-danger']"以中括號來指定物件內所含的資料型態是比較少見的做法，在這邊會這樣使用是因為如果用破折號（ – ）來選取該物件內所含的資料的話，程式會在開發人員工具中顯示錯誤。
除了透過物件以外，也可以使用陣列的方式為一個 HTML 元素加上 class。首先，要先在 Vue 應用程式內宣告一個空的陣列，範例如下：
arrayClass: []當不確定會加入哪些 Class 到一個元素上時，用陣列的方式來撰寫是最好的。
並將擁有該空陣列的變數名稱透過 :class=”” 的方式套用在一個 HTML 元素上，例如：
:class="arrayClass"接著，在一個輸入欄位元素（ <input> ）內加上以下屬性，來動態地加入 class 名稱至剛剛宣告的空陣列內：
v-model="arrayClass" value="btn-outline-primary"當然，也可以加入多個輸入欄位元素（ <input> ），依照不同需要賦予 class 到一個 HTML 元素上：
v-model="arrayClass" value="btn-outline-primary"
v-model="arrayClass" value="active"
v-model="arrayClass" value="bg-danger"
v-model="arrayClass" value="btn-outline-info"
......除了與按鈕或是 <input> 標籤做連結以外，v-bind 這個指令也可以與行內樣式屬性 style 相互連結，縮寫為 :style=””。例如：
:style="{backgroundColor: 'red'}"
:style="styleObject"
:style="[{backgroundColor: 'red'}, {borderWidth: '5px'}]"
:style="[styleObject, styleObject2]"不論是物件本身、用來儲存物件的變數，或是一整個完整的陣列，都可以透過 :style=”” 指派給單一 HTML 元素。
最後，使用 Vue 來綁定 Class 不需要加入 Prefix （前綴詞）， Vue 會自動為每個不同的瀏覽器加入相對應的前綴詞。