1. 條件渲染
v-if、v-else-if、v-else / v-show
>
v-if
="status === 1"
>
當status為1 顯示該行p
>
v-else-if
="status === 2"
>
當status為2 顯示該行p
>
v-else
="status === 3"
>
當status為3 顯示該行p
>
v-show
="status === 1"
>
當status為1 顯示該行,否則隱藏該行p
>
div>
src=
"">
script
>
>
newvue(}
)script
>
v-show使用場景
2. 列表渲染
v-for
當需要將乙個陣列遍歷或列舉乙個物件迴圈顯示時，就會用到列表渲染指令v-for。
它的表示式需結合in來使用，類似 item in items的形式。
列表渲染也支援用of來代替in作為分隔符。
v-for渲染物件：可以用v-for來遍歷乙個物件屬性。
>
>
陣列h4
>
>
v-for
="item in items"
>
}li>
ul>
>
v-for
="(item,index) of items"
>
}li>
ul>
>
>
物件h4
>
>
v-for
="item in obj"
>
}li>
ul>
div>
src=
"">
script
>
>
newvue(,
,,,]
, obj:}}
)script
>
為了給vue乙個提示,以便它能跟蹤每個節點的身份,從而重用和重新排序現有元素,你需要為每項提供乙個唯一key屬性
>
>
v-for
="item in items"
>
}li>
ul>
>
v-for
="item in items"
v-bind:key
="item.name"
>
}li>
ul>
@click
="addlist"
>
陣列新增元素button
>
div>
src=
"">
script
>
>
newvue(,
,,,]
},methods:)}
}})script
>
列表渲染
vue將被偵聽的陣列的變異方法進行了包裹，所以它們也將會觸發檢視更新，被包裹過的方法有：push()，pop()，shift()，unshift()，splice()，sort()， reverse()；
當使用非變異方法時，可以用新陣列替換舊陣列，涉及方法有 filter()、concat()和slice()
兩種情況不能監聽：當利用索引直接設定乙個陣列項時；當修改陣列的長度時。
var vm =
newvue(}
)vm.items[1]
='x'
// 不是響應性的
vm.items.length =
2
如果想要顯示乙個陣列經過過濾或排序後的版本,而不實際改變或重置原始資料，可以建立乙個計算屬性，來返回過濾或排序後的陣列
>
>
v-for
="n in eventnumbers"
>
}li>
ul>
div>
src=
"">
script
>
>
newvue(,
computed:)}
}})script
>
可以利用帶有v-for的來迴圈渲染一段包含多個元素的內容
>
v-for
="item in items"
>
>
}li>
class
="divider"
role
="presentation"
>
li>
template
>
ul>
Vue 模板渲染 條件渲染 列表渲染
當獲取到後端資料後，我們會把它按照一定的規則載入到寫好的模板中，輸出成在瀏覽器中顯示的 html，這個過程就稱之為渲染。而 vue.js 是在前端 即瀏覽器內 進行的模板 渲染。1.前後端渲染對比 前端渲染 的優勢 是在瀏覽器裡利用 js 把資料和 html 模板進行組合，業務分離，後端只需要提供資...
vue入門 條件和列表渲染
v if指令，很容器理解就是乙個條件判斷，當條件成立時渲染 另外，還能夠使用v else if和v else，v else元素必須緊跟在帶v if或者v else if的元素的後面，否則它將不會被識別。bc 根據上邊的例子，v if 主要就是決定元素的顯示和隱藏 還有另外乙個相同作用的指令v sho...
vue 模板 計算 偵聽 條件渲染 列表渲染
通常是根據已有的 data 資料，計算生成新的資料，把這種結構叫做計算屬性，計算屬性在 vue 的選項物件中使用computed屬性來設定，例 注意，通常對於計算屬性，不會重新用 賦值。計算屬性與方法的區別 計算屬性的值會被快取，只有當其所依賴的資料發生變化後，才會重新計算計算屬性的值，計算完畢後繼...