快捷導(dǎo)航

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

更新時(shí)間：2017年06月23日 14:31:54 作者：學(xué)習(xí)筆記666

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

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一個(gè)Vue實(shí)例，實(shí)例化的時(shí)候傳入了一個(gè)對(duì)象{el:'#box',data:{msg:'Hello Vue!'}}。這個(gè)意思是：Vue這個(gè)只控制id="box"這個(gè)DIV元素，同時(shí)在 HTML模板上使用雙花括號(hào){{xxxx}}語(yǔ)法，來(lái)訪問(wèn)data中定義的數(shù)據(jù)。

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

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

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

2.v-model指令

所謂的“指令”其實(shí)就是擴(kuò)展了HTML標(biāo)簽功能(屬性)。

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>

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

這里寫(xiě)圖片描述

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

<!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都被當(dāng)作字符串輸出了，顯然這不是我們理想的效果。

這里寫(xiě)圖片描述

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>

這里寫(xiě)圖片描述