v-on

a)         进行事件的绑定，我们用的最多的是click事件绑定

b)         简写@

c)         实现跑马灯的效果

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id='app'>
        <button @click='start' :disabled = flag>开始</button>
        <button @click='end' :disabled = !flag>结束</button>
        <br>
        {{message}}
    </div>
</body>
<script>
    let vue = new Vue({
        el:'#app',
        data:{
            flag:false,
            message:'猥琐发育，别浪~~~'
        },
        methods:{
            start(){
                // 点击后disabled变为true，按钮禁用
                this.flag = true;
                // clearInterval(this.timer);
                // 判断定时器有没有内容
                if (this.timer) return;
                this.timer = setInterval(() => {
                    // 切割字符串，第一位移至最后一位
                    let message1 = this.message.substring(0, 1);
                    let message2 = this.message.substring(1);
                    // 字符串拼接
                    this.message = message2 + message1;
                }, 300);
                
            },
            end(){
                // 点击后disabled变为!false即true，按钮禁用(初始为值与开始按钮相反)
                this.flag = false;
                clearInterval(this.timer);
                this.timer = null;
            }
        }
    })
</script>
</html>

 

posted @ 2021-09-13 20:27  从入门到入土  阅读(141)  评论(0)  编辑  收藏  举报