Vue學習筆記（二）

2 迴圈

3 計算屬性

條件判斷使用v-if指令：

>
v-if
="seen"
>
看到了p
>
;div
>


newvue(}
)<
/script>

v-if指令根據表示式的值（在這裡是seen）決定是否插入

可以使用v-else新增乙個else塊：

>
v-if
="math.random()>0.5"
>
1div
>
v-else
>
2div
>
div>


newvue()
<
/sctipt>

也可以增加v-else-if：

>
v-if
="value === 'a'
">
adiv
>
v-else-if
="value === 'b'
">
bdiv
>
v-else-if
="value === 'c'
">
cdiv
>
v-else
>
ddiv
>
div>


newvue(}
)<
/script>

v-else以及v-else-if必須跟在v-if或者v-else-if之後。

也可以根據v-show展示元素：

>
v-show
="ok"
>
testh1
>
div>


newvue(}
)<
/script>

迴圈使用v-for，格式為：a in b，其中a是b中的每乙個值，若b為陣列，則a表示其中的沒乙個元素，若b為物件，則a可以表示b中的沒乙個值，通常配合使用：

>
>
v-for
="i in arr"
>
}li>
ol>
div>


newvue(,
,]}}
)<
/script>

另外也可以通過乙個物件的屬性來迭代資料：

>
>
v-for
="value in obj"
>
}li>
ul>
div>


newvue(}
})<
/script>

也可以提供第二個引數作為鍵名：

v-for
="(value,key) in obj"
>
} -> }
li>

第三個引數作為索引：

v-for
="(value,key,index) in obj"
>
} : } -> }
li>

另外也可以迭代整數：

v-for
="n in 10"
>
}li>

範圍是從0到10，包含0與10。

計算屬性類似與方法呼叫，比如之前的反轉字串的例子：

這樣看起來很長，可以使用計算屬性進行簡化：

>
>
}p>
div>


newvue(,
computed:}}
)<
/script>

這裡宣告了乙個計算屬性reverse，提供的函式作為屬性reverse的getter，reverse依賴於message，當message更新時，reverse也會更新。

可以使用methods來代替computed：

methods:
}

對應只需要增加一對()：

>
>
}p>
div>

computed基於它的依賴快取，只有相關依賴修改時才會重新取值，而使用methods，在重新渲染時函式總會重新呼叫執行。

computed預設只有getter，不過也可以自行提供setter：

var vm =
newvue(,
computed:
,set
:function
(value)}}
})vm.site =
'test2 '
document.
write
('name:'
+vm.name)
document.
write('
')document.
write
('url:'
+vm.url)

Vue學習筆記二

事件修飾符統一的js new vue methods btnhandler linkclick stop事件 class inner click div1handler type button value 戳他 click.stop btnhandler div prevent事件 href cl...

vue 學習筆記（二）

正在進行的工作已完成的工作 vue 正在進行的工作已完成的工作 storage模組化元件快取的功能返回json資料型別 let storage getstorage key clearitem removeitem key export default storage 元件的宣告 vue中非...

Vue學習筆記（二）

條件判斷使用v if指令 v if指令根據表示式的值在這裡是seen 決定是否插入可以使用v else新增乙個else塊 2v else以及v else if必須跟在v if或者v else if之後。也可以根據v show展示元素迴圈使用v for，格式為 a in b，其中a是b中的每乙個...

Vue學習筆記（二）

Vue學習筆記二

vue 學習筆記（二）

Vue學習筆記（二）

相關推薦