vue实现跑马灯效果

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device

轻尘×

3762人浏览 · 2019-04-08 10:54:33

轻尘× · 2019-04-08 10:54:33 发布

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X_UA-Compatible" content="ie=edge">
    <title>vue 入门</title>
    <!--1 导入vue.js库-->
    <script src="./lib/vue.js"></script>
</head>

<body>
        <div id="app">
        <input type="button" value="走你" @click="go" >
        <input type="button" value="@"  @click="show" />
        <input type="button" value="停止" @click="stop">
       <h4>{{msg}}</h4>
    </div>
    <script>
        //2  创建一个vue实例
        //当导入Vue包后，在浏览器的内存中，就多了一个Vue构造函数
        //在vm实例中如果要调用datas上的数据，或者想调用methods上的方法，需通过this访问
        var vm = new Vue({
            el: '#app',    //表示当前new的这个Vue实例，要控制页面上的哪个区域
            data: {  //data 属性中，存放的就是el中要用到的数据
                msg: '猥琐发育别浪！稳住，我们能赢！若轻云之蔽月，若流风之回雪',   //通过Vue提供是指令，把数据渲染到页面，无需再手动操作DOM元素
                intervalId: null        //在data上绑定一个定时器id
            },
            methods: {   //定义当前Vue实例的所有方法
                show:  function(){
                    alert('hello');
                },
                
                go(){
                        if(this.intervalId !=null)return;
                        this.intervalId = setInterval(()=>{
                        var start = this.msg.substring(0,1);
                        var end  = this.msg.substring(1);
                        this.msg = end + start;
                    },200)
                },
                stop(){
                    //清除定时器
                    clearInterval(this.intervalId)
                    //将定时器id重置为null
                    this.intervalId = null;
                }
            }
        })

    </script>
</body>

</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^