Vue/Vue案列(计数器 、排他思想)

一.计数器

<div id="app">
        <button @click="num--" :disabled="num == 0">-</button>
        <span>{{num}}</span>
        <button @click="num++" :disabled="num == 10">+</button>
</div>

 const app = new Vue({
     el: '#app',
     data: {
         num: 0
     },
 })

disabled  禁用按钮

二.排他思想

 <div id="app">
    <button
     v-for="(item,index) in list" 
    :class="{ active: index === currentIndex }"
     @click="currentIndex = index">{{item}}
</button>
  </div>

let app = new Vue({
      //el:挂载点
      el: "#app",
      //data: 要渲染的数据
      data: {
        currentIndex: 0,
        list: ['前端', 'java', '测试', '大数据']
      },
      //methods: 事件处理函数
      methods: {}
    })

currentIndex  相同的下标的元素是 true ， 其他的都是false