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

2019-11-19 16:16:03

字體：大中小

來源：轉載

供稿：網友

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中定義的數據。

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

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

2.v-model指令

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

v-model的雙向數據綁定

<!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 數據綁定到了input文本框，我們修改文本框的值，發現msg 數據改變了。

這里寫圖片描述

注意：如果我們定義的數據是數組或者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>

數組和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>循環數組</p>    <ul>      <li v-for="a in arr">      {{a}}      </li>    </ul>    <hr>    <p>循環出數組索引</p>    <ul>      <li v-for="(v,k) in arr">      {{v}}==>{{k}}    </ul>    <p>循環json</p>    <ul>      <li v-for="item in json">{{item}}</li>    </ul>    <p>循環json的鍵</p>    <ul>      <li v-for="(k,v) in json">      {{k}}==>{{v}}      </li>    </ul>  </div></body></html>

這里寫圖片描述