【Vue 案例】甜鸡汤语录切换

【Vue 案例】甜鸡汤语录切换 [ 编程杂谈 ]

大数据男孩文章正文

明妃

{{nature("2022-08-14 17:23:18")}}更新

说明

上下条数切换
第一条时，上一条按钮禁止点击
最后一条时，下一条按钮禁止点击

<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>

[ mark ]()