然后看一下效果：

還是分析一下這個(gè)小demo。

（2） 其次是 v-bind

 
 
 
 
  .aaa{
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  }
  .bbb{
  margin: 10px;
  width: 50px;
  height: 50px;
  background-color: blue;
  }
 
 
 
 
 
 
  
  
  
    
  
  -------------------------------------------------------------------------------------
  
  
  
  
 
 
 
 
 
 
 //通過(guò)Vue.js的構(gòu)造函數(shù) 實(shí)例化出一個(gè)根實(shí)例
 var app1= new Vue({
  el:"#app1", 
  data:{
  myColor:"blue",
  myWidth:100,
  myHeight:100,
  myClass:"aaa",
  mySrc:"img/2.png",
  func1:function(){
   if (this.myColor == "blue") {
   this.myColor = "red";
   this.myWidth = 50,
   this.myHeight = 50
   }else{
   this.myColor = "blue";
   this.myWidth = 100,
   this.myHeight = 100
   }
  },
  func2:function(){
   if (this.myClass == "aaa") {
   this.myClass = "bbb";
   }else{
   this.myClass = "aaa";
   }
  },
  func3:function(){
   if (this.mySrc == "img/2.png") {
   this.mySrc = "img/u=1622626696,1630096734&fm=23&gp=0.jpg";
   }else{
   this.mySrc = "img/2.png";
   }
  }
  }
 });
 
 

然后看一下效果：

那我們解析一下上面的代碼。

v-bind 他是專門用來(lái)綁定屬性的 ，主要用來(lái)操作元素的 class 列表和它的內(nèi)聯(lián)樣式。這一點(diǎn)和AnjularJs的 ng-bind 是完全不同的，要注意！?。?/p>

 　　 這是直接綁定屬性，動(dòng)態(tài)修改 img 的src 屬性。達(dá)到點(diǎn)擊圖像顯示不同的圖像的效果。

這里要特別強(qiáng)調(diào)一下，v-bind 直接綁定的是屬性，而不是樣式 ，對(duì)于 img ，他的src是屬性，但是對(duì)于 div ，width 啥的是樣式，不是屬性，所以 v-bind:width="100+'px'" 不好使.

至于 v-bind 屬性綁定，也就常用用法也就這么多了。

（3） v-model

用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并特別處理一些極端的例子。v-model 并不關(guān)心表單控件初始化所生成的值。因?yàn)樗鼤?huì)選擇 Vue 實(shí)例數(shù)據(jù)來(lái)作為具體的值。在默認(rèn)情況下， v-model 在 input 事件中同步輸入框的值與數(shù)據(jù)，但你可以添加一個(gè)修飾符 lazy ，從而轉(zhuǎn)變?yōu)樵?change 事件中同步

下面我們看一段代碼：

 
 
 
 
  .aaa{
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: red;
  }
  .bbb{
  margin: 10px;
  width: 50px;
  height: 50px;
  background-color: blue;
  }
 
 
 
 
 
 
  
  {{ myText }}
  -------------------------------------------------------------------------------------
  
  
  男
  

  
  女
  

  您選擇了: {{ picked }}
  


  -------------------------------------------------------------------------------------
  
  
  
  好帥！
  
  你是我的男神！
  
  我愛(ài)你，飛哥！
  
  

  您對(duì)飛哥的評(píng)價(jià): {{ names }}


  --------------------------------------------------------------------------
  

   
  親飛哥 
  向飛哥表白 
  請(qǐng)飛哥吃飯
  

  真心話大冒險(xiǎn): {{ selected1 }}


  ------------------------------------------------------------------------------
  
  
   
   親親 
   抱抱 
   舉高高
  
  

  你想和飛哥偷偷干些啥: {{ selected22 }}

  
 
 
 
 
 
 
 
 //通過(guò)Vue.js的構(gòu)造函數(shù) 實(shí)例化出一個(gè)根實(shí)例
 var app1= new Vue({
  el:"#app1",
  data:{
  myText:"",
  picked:"",
  selected1:"",
  //這是復(fù)選列表的變量，函數(shù)
  selected2:[],
  selected22:"",
  funcselected22:function(){
   this.selected22 = this.selected2.join("　");
  },
  //復(fù)選框的函數(shù),及其相關(guān)變量
  checkedNames:[],
  names:"",
  funcCheckedNames:function(){
   this.names = this.checkedNames.join("　");
  }
 

然后看一下效果：

然后解析一下這段代碼。這里就不一一詳細(xì)解釋代碼了，挑幾個(gè)典型的詳解，其他的便很簡(jiǎn)單了。

我們就以 多選按鈕為例：

 
 好帥！
 
 你是我的男神！
 
 我愛(ài)你，飛哥！
 

//這是復(fù)選列表的變量，函數(shù)
 selected2:[],
 selected22:"",
 funcselected22:function(){
 this.selected22 = this.selected2.join("　");
 },

這里要強(qiáng)調(diào)一下，v-model 動(dòng)態(tài)綁定這種多選框之類的，會(huì)以數(shù)組的形式存取，所以，我們用 selected2:[], 變量接收 選擇框 的數(shù)據(jù)，但是我們又不能直接用雙大括號(hào)顯示數(shù)據(jù)，朋友們可以試驗(yàn)一下，雙大括號(hào)是純文本顯示，他會(huì)把整個(gè)數(shù)組的中括號(hào)，引號(hào)，逗號(hào)都顯示出來(lái)，太丑了。所以這里，我用了JQuery的數(shù)組分割為字符串的函數(shù) join("　")，把選中的數(shù)據(jù)分割成字符串，再用一個(gè)字符串類型的變量接收數(shù)據(jù)，這樣打印出來(lái)就好多了。注意，這里 join("　") 我用的分隔符是 空白字符，它占一個(gè)漢字的空間，但是不會(huì)顯示出來(lái)。

感謝各位的閱讀！關(guān)于“Vue.js中基礎(chǔ)指令的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！