綑綁捉取事件

v-bind

屬性綁定，可使用 ： 作為縮寫

<div id="app">
    <div class="img" 
        v-for="(item,index) in imgList" 
        v-bind:style="{borderColor:item.color}" >

        <img v-bind:src="item.src" width="100%">

    </div>
</div>
<script>
  (function(window){
      var data = {
        classList:[
          {
            src:"圖片位置",
            color:"red",
            disabled:false
          }
          {...}
        ]
      }

      var vm = new Vue({
        el:'#app',
        data:data
      })
  })(window)
</script>

範例點選

v-on

綁定事件，可使用 ＠ 作為縮寫

methods

針對事件或是其他處理所需函式

<div id="app">
    <div class="img" 
        v-for="(item,index) in imgList" 
        v-bind:style="{borderColor:item.color}"
        v-on:dblclick="switchDisable(index)"
        v-bind:class="{disabled:item.disabled}">

        <img v-bind:src="item.src" width="100%">
        <div class="mask" v-bind:style="{display : item.disabled ? 'block' : 'none'}"></div>
        //                                                       if      else
    </div>
</div>

<script>
  (function(window){
      var data = {
        classList:[
          {
            src:"圖片位置",
            color:"red",
            disabled:false
          }
          {...}
        ]
      }

      var vm = new Vue({
        el:'#app',
        data:data,
        methods:{
          //把false true 丟回去 imgList 
          switchDisable:function(index){
            //this 的意思是說 Vue ，裡面的圖片被雙點擊之後，新增 disabled 否則取消
            //驚嘆號代表反向
            this.imgList[index].disabled = !this.imgList[index].disabled
          }
        }
      })
  })(window)
</script>

精簡寫法

<div id="app" v-cloak>
    <div class="img" v-for="(item,index) in imgList"
      v-bind:style="{borderColor:item.color}"
      v-on:dblclick="switchDisable(index)"
      v-bind:class="{disabled:item.disabled}" >
      <img v-bind:src="item.src" width="100%">
      <div class="mask"></div>
    </div>
</div>

範例點選