溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發(fā)布時間：2020-10-22 13:02:27 來源：腳本之家 閱讀：144 作者：學習筆記666 欄目：web開發(fā)

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ù)改變了。

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

注意：如果我們定義的數(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都被當作字符串輸出了，顯然這不是我們理想的效果。

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

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>

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手