vue基礎(chǔ)之data存儲數(shù)據(jù)及v-for循環(huán)用法示例
更新時間：2019年03月08日 14:20:44 作者：白楊-M
這篇文章主要介紹了vue基礎(chǔ)之data存儲數(shù)據(jù)及v-for循環(huán)用法,結(jié)合實例形式分析了vue.js使用data存儲數(shù)據(jù)、讀取數(shù)據(jù)及v-for遍歷數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了vue data存儲數(shù)據(jù)及v-for循環(huán)用法。分享給大家供大家參考，具體如下：
vue data里面存儲數(shù)據(jù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.dhdzp.com vue data里面存儲數(shù)據(jù)</title>
<style>
</style>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:'body',
data:{
msg:'welcome vue',
msg2:12,
msg3:true,
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
}
});
};
</script>
</head>
<body>
<input type="text" v-model="msg">
<input type="text" v-model="msg">
<br>
{{msg}}
<br>
{{msg2}}
<br>
{{msg3}}
<br>
{{arr}}
<br>
{{json}}
</body>
</html>
vue v-for循環(huán)
v-for循環(huán):
v-for="name in arr"
{{value}} {{$index}}
v-for="name in json"
{{value}} {{index}} {{index}} {{key}}
v-for="(k,v) in json"
{{k}} {{v}} {{index}} {{index}} {{key}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.dhdzp.com vue v-for循環(huán)</title>
<style>
</style>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
arr:['apple','banana','orange','pear'],
json:{a:'apple',b:'banana',c:'orange'}
}
});
};
</script>
</head>
<body>
<div id="box">
<ul>
<li v-for="value in arr">
{{value}} {{$index}}
</li>
</ul>
<hr>
<ul>
<li v-for="value in json">
{{value}} {{$index}} {{$key}}
</li>
</ul>
<hr>
<ul>
<li v-for="(k,v) in json">
{{k}} {{v}} {{$index}} {{$key}}
</li>
</ul>
</div>
</body>
</html>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
今天小編就為大家分享一篇關(guān)于vue-router命名視圖的使用講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要給大家介紹了關(guān)于Vue項目引發(fā)的「過濾器」使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了超詳細(xì)的5個Shell腳本實例分享(值得收藏),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家介紹了Vue組件實現(xiàn)景深卡片輪播示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
在vue使用clipboard.js進(jìn)行一鍵復(fù)制文本的實現(xiàn)示例
這篇文章主要介紹了在vue使用clipboard.js進(jìn)行一鍵復(fù)制文本的實現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
class 與 style 綁定就是專門用來實現(xiàn)動態(tài)樣式效果的技術(shù),如果需要動態(tài)綁定 class 或 style 樣式,可以使用 v-bind 綁定,本文給大家講解Vue 綁定style和class樣式,感興趣的朋友一起看看吧2023-10-10
Vue2.x Todo之自定義指令實現(xiàn)自動聚焦的方法
我們希望用戶雙擊 todo 進(jìn)入編輯狀態(tài)后輸入框自動獲取焦點，而不是需要先手動點一下。這篇文章主要介紹了Vue 2.x Todo之自定義指令實現(xiàn)自動聚焦,非常具有實用價值，需要的朋友可以參考下2019-01-01
本篇文章主要介紹了在vue-cli項目中使用bootstrap的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Vue3結(jié)合TypeScript項目開發(fā)實戰(zhàn)記錄
聽說有的公司已經(jīng)開始用vue3了 趕緊打開B站學(xué)一下,下面這篇文章主要給大家介紹了關(guān)于Vue3結(jié)合TypeScript項目開發(fā)實戰(zhàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
elementui實現(xiàn)預(yù)覽圖片組件二次封裝
這篇文章主要介紹了elementui實現(xiàn)預(yù)覽圖片組件二次封裝的方法 ，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12