快捷導航

VUE中v-model和v-for指令詳解

更新時間：2017年06月23日 14:31:54 作者：學習筆記666

本篇文章主要介紹了VUE中v-model和v-for指令詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1.基本雛形

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data:{
          msg:'Hello Vue!'
        }
      });
    }
  </script>
</head>
<body>
  <div id="box">
    {{msg}}
  </div>
</body>
</html>

需要new一個Vue實例，實例化的時候傳入了一個對象{el:'#box',data:{msg:'Hello Vue!'}}。這個意思是：Vue這個只控制id="box"這個DIV元素，同時在 HTML模板上使用雙花括號{{xxxx}}語法，來訪問data中定義的數(shù)據(jù)。

上面代碼我們new處理一個Vue的實例，并賦值給了vm變量，通過這個vm變量，我們也可以訪問其中定義的數(shù)據(jù)：

      var vm = new Vue({
        el:'#box',
        data:{
          msg:'Hello Vue!'
        }
      });

      console.log(vm.msg); //'Hello Vue!'

2.v-model指令

所謂的“指令”其實就是擴展了HTML標簽功能(屬性)。

v-model的雙向數(shù)據(jù)綁定

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data:{
          msg:'Hello Vue!'
        }
      });
    }
  </script>
</head>
<body>
  <div id="box">
    <input type="text" v-model="msg"/><br/>
    {{msg}} 
  </div>
</body>
</html>

通過v-model 指令，我們把msg 數(shù)據(jù)綁定到了input文本框，我們修改文本框的值，發(fā)現(xiàn)msg 數(shù)據(jù)改變了。

這里寫圖片描述

注意：如果我們定義的數(shù)據(jù)是數(shù)組或者json，在模板上會怎樣顯示出來呢？

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data:{
          msg:'Hello Vue!',
          arr:['apple','banana','orange'],
          json:{a:'apple',b:'banana'}
        }
      });
    }
  </script>
</head>
<body>
  <div id="box">
    <input type="text" v-model="msg"/><br/>
    {{msg}} <br/>
    {{arr}} <br/>
    {{json}}

  </div>
</body>
</html>

數(shù)組和json都被當作字符串輸出了，顯然這不是我們理想的效果。

這里寫圖片描述

3.v-for指令

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <script src="http://unpkg.com/vue/dist/vue.js"></script>

  <script type="text/javascript">
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data:{
          arr:['apple','banana','orange'],
          json:{a:'apple',b:'banana'}
        }
      });
    }
  </script>
</head>
<body>
  <div id="box">
    <p>循環(huán)數(shù)組</p>
    <ul>
      <li v-for="a in arr">
      {{a}}
      </li>
    </ul>
    <hr>
    <p>循環(huán)出數(shù)組索引</p>
    <ul>
      <li v-for="(v,k) in arr">
      {{v}}==>{{k}}
    </ul>
    <p>循環(huán)json</p>
    <ul>
      <li v-for="item in json">{{item}}</li>
    </ul>
    <p>循環(huán)json的鍵</p>
    <ul>
      <li v-for="(k,v) in json">
      {{k}}==>{{v}}
      </li>
    </ul>
  </div>
</body>
</html>

這里寫圖片描述