vue中的侦听器-监听的小demo

最新推荐文章于 2024-11-07 13:38:59 发布

正儿八经学前端

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量158

点赞数

分类专栏： demo 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_42101753/article/details/106121809

版权

demo 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 用户名是3-6位 -->
      <input type="text" placeholder="请输入用户名" v-model="username"><span>{{tips}}</span>
    </div>

    <script src="vue.js"></script>
    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          username: '',
          tips: ''
        },
        watch: {
          username(value) {
            if (value.length >= 3 && value.length <= 6) {
              this.tips = '✔'
            }else {
              this.tips = '✖'
            }
          }
        }
      })
    </script>
  </body>
</html>