一.计数器
<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