vue翻转字符串和vue跑马灯案例

vue翻转字符串

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <button @click="fn">翻转</button>
      <p>{{ msg }}</p>
    </div>

    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello vue'
        },
        methods: {
          fn () {
            this.msg = this.msg.split('').reverse().join('')
          }
        }
      })
    </script>
  </body>
</html>

vue跑马灯案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <button @click="run">跑</button>
      <button @click="stop">停</button>
      <p>{{ msg }}</p>
    </div>

    <script src="./vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          msg: '猪肉30一斤，买一斤送一斤',
          timeId:''
        },
        methods: {
          run () {
            if(this.timeId) return
            
            this.timeId = setInterval(() => {
              this.msg = this.msg.slice(1) + this.msg.slice(0,1)
            },500)
          },
          stop () {
            clearInterval(this.timeId)
            this.timeId = ''
          }
        }
      })
    </script>
  </body>
</html>

来源：CSDN

作者：Pray_for_xi

链接：https://blog.csdn.net/Pray_for_xi/article/details/103809125

标签

vue

跑马灯

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!