vue基礎之data存儲數據及v-for循環(huán)用法示例

更新時間：2019年03月08日 14:20:44 作者：白楊-M

這篇文章主要介紹了vue基礎之data存儲數據及v-for循環(huán)用法,結合實例形式分析了vue.js使用data存儲數據、讀取數據及v-for遍歷數據相關操作技巧,需要的朋友可以參考下

本文實例講述了vue data存儲數據及v-for循環(huán)用法。分享給大家供大家參考，具體如下：

vue data里面存儲數據

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.dbjr.com.cn vue data里面存儲數據</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代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

希望本文所述對大家vue.js程序設計有所幫助。

您可能感興趣的文章:

Vue使用json-server進行后端數據模擬功能
這篇文章主要介紹了Vue使用json-server進行后端數據模擬功能,非常不錯，具有參考借鑒價值,需要的朋友可以參考下
2018-04-04
vue3中echarts的tooltip組件不顯示問題及解決
這篇文章主要介紹了vue3中echarts的tooltip組件不顯示問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
關于vuejs中v-if和v-show的區(qū)別及v-show不起作用問題
v-if 有更高的切換開銷,而 v-show 有更高的出事渲染開銷.因此,如果需要非常頻繁的切換,那么使用v-show好一點;如果在運行時條件不太可能改變,則使用v-if 好點
2018-03-03
詳解Vue2.0 事件派發(fā)與接收
這篇文章主要介紹了詳解Vue2.0 事件派發(fā)與接收,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
vue-devtools的安裝和使用步驟詳解
在本篇文章中小編給大家整理的是一篇關于vue-devtools安裝使用的相關知識點內容，有需要的朋友們可以學習下。
2019-10-10
uniapp實現紅包動畫效果代碼實例(vue3)
uniapp作為一種基于Vue.js的前端框架,實現了一套代碼多端運行的理念,成為了眾多開發(fā)者的首選,下面這篇文章主要給大家介紹了關于uniapp實現紅包動畫效果的相關資料,需要的朋友可以參考下
2024-01-01
Vue.js的復用組件開發(fā)流程完整記錄
這篇文章主要給大家介紹了關于Vue.js的復用組件開發(fā)流程的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2018-11-11
在?Vue?中使用?dhtmlxGantt?組件時遇到的問題匯總(推薦)
dhtmlxGantt一個功能豐富的甘特圖插件，支持任務編輯，資源分配和多種視圖模式，這篇文章主要介紹了在?Vue?中使用?dhtmlxGantt?組件時遇到的問題匯總,需要的朋友可以參考下
2023-03-03
詳解vite2.0配置學習(typescript版本)
這篇文章主要介紹了詳解vite2.0配置學習(typescript版本)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-02-02
Vue?uni-app框架實現上拉加載下拉刷新功能
uni-app是一個使用Vue.js(opens?new?window)開發(fā)所有前端應用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應用等多個平臺
2022-09-09