vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法示例
更新時(shí)間：2019年03月08日 14:20:44 作者：白楊-M
這篇文章主要介紹了vue基礎(chǔ)之data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法,結(jié)合實(shí)例形式分析了vue.js使用data存儲(chǔ)數(shù)據(jù)、讀取數(shù)據(jù)及v-for遍歷數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了vue data存儲(chǔ)數(shù)據(jù)及v-for循環(huán)用法。分享給大家供大家參考，具體如下：
vue data里面存儲(chǔ)數(shù)據(jù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.dbjr.com.cn vue data里面存儲(chǔ)數(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.dbjr.com.cn 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代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能
這篇文章主要介紹了Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能,非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04
vue3中echarts的tooltip組件不顯示問(wèn)題及解決
這篇文章主要介紹了vue3中echarts的tooltip組件不顯示問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
關(guān)于vuejs中v-if和v-show的區(qū)別及v-show不起作用問(wèn)題
v-if 有更高的切換開(kāi)銷,而 v-show 有更高的出事渲染開(kāi)銷.因此,如果需要非常頻繁的切換,那么使用v-show好一點(diǎn);如果在運(yùn)行時(shí)條件不太可能改變,則使用v-if 好點(diǎn)2018-03-03
這篇文章主要介紹了詳解Vue2.0 事件派發(fā)與接收,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
在本篇文章中小編給大家整理的是一篇關(guān)于vue-devtools安裝使用的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。2019-10-10
uniapp實(shí)現(xiàn)紅包動(dòng)畫效果代碼實(shí)例(vue3)
uniapp作為一種基于Vue.js的前端框架,實(shí)現(xiàn)了一套代碼多端運(yùn)行的理念,成為了眾多開(kāi)發(fā)者的首選,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)紅包動(dòng)畫效果的相關(guān)資料,需要的朋友可以參考下2024-01-01
Vue.js的復(fù)用組件開(kāi)發(fā)流程完整記錄
這篇文章主要給大家介紹了關(guān)于Vue.js的復(fù)用組件開(kāi)發(fā)流程的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問(wèn)題匯總(推薦)
dhtmlxGantt一個(gè)功能豐富的甘特圖插件，支持任務(wù)編輯，資源分配和多種視圖模式，這篇文章主要介紹了在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問(wèn)題匯總,需要的朋友可以參考下2023-03-03
詳解vite2.0配置學(xué)習(xí)(typescript版本)
這篇文章主要介紹了詳解vite2.0配置學(xué)習(xí)(typescript版本)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
Vue?uni-app框架實(shí)現(xiàn)上拉加載下拉刷新功能
uni-app是一個(gè)使用Vue.js(opens?new?window)開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)2022-09-09