數(shù)據(jù)綁定
<div id="app">
<input type="text" v-model="name" >
<span>{{name}}</span>
</div>
new Vue({
el: "#app",
data() {
return {
name:true
}
}
});
通過添加v-model進行雙重數(shù)據(jù)綁定
computed計算屬性
methods方法:一旦某個方法執(zhí)行,所有方法都會全部執(zhí)行
區(qū)別:
寫法上:computed計算屬性在用屬性時不用加(),而methods在使用時必須加()
<div id="app">
<p>methods需要加()--{{fn()}}</p>
<p>computed不需要()--{{fn}}</p>
</div>
緩存上:computed 計算屬性緩存依賴于數(shù)據(jù)模型中的屬性(data中數(shù)據(jù))色查,如果模型中的屬性不改變它的緩存就不改變薯演,如果數(shù)據(jù)模型中的屬性發(fā)生改變則再計算一遍
method方法不管你數(shù)據(jù)模型中的屬性是否改變都有執(zhí)行
computed 的作用主要是對原數(shù)據(jù)進行改造輸出。
改造輸出:包括格式的編輯秧了,大小寫轉換跨扮,順序重排,添加符號等验毡。
動態(tài)綁定css
v-if
<div v-if='條件1'>如果滿足條件1執(zhí)行</div>
<div v-else-if='條件2'>如果滿足條件2執(zhí)行</div>
<div v-else>以上條件都不滿足執(zhí)行</div>
v-for
<div v-for="(value, key, index) in 對象名或者數(shù)組名">
{{ index }}. {{ key }}: {{ value }}
</div>