说明
- 上下条数切换
- 第一条时，上一条
按钮禁止点击 - 最后一条时，下一条
按钮禁止点击
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
<div id="app">
<!-- 当第一条时，按钮禁止 -->
<button type="button" v-bind:disabled="index == 0 ? true : false" @click="prev">上一条</button>
<br/>
<span v-text="arr[index]"></span>
<br/>
<!-- 最后一条时，按钮禁止 -->
<button type="button" v-bind:disabled="index == arr.length - 1 ? true : false" @click="next">下一条</button>
</div>
</body>
<script>
var vue = new Vue({
el: "#app",
data: {
arr: [
"你要努力的去生活，因为你只有努力了，才知道自己真的不行。",
"好看的皮囊三千一晚，有趣的灵魂要车要房。",
"别人的钱财，乃我的身外之物。",
"别人的身体里都是才华，你的身体里都是珍珠奶茶。",
],
index: 0
},
methods:{
prev:function(){
this.index -= 1
},
next:function(){
this.index += 1
}
}
})
</script>
上一篇
【Vue 案例】记事本
【Vue 案例】记事本
下一篇
【Vue】Vue 指令
【Vue】Vue 指令
版权声明：《 【Vue 案例】甜鸡汤语录切换 》为明妃原创文章，转载请注明出处！
最后编辑:2020-9-28 12:09:26