Vue学习（事件监听、条件判断）

最新推荐文章于 2024-08-16 07:34:20 发布

coder_Alger

最新推荐文章于 2024-08-16 07:34:20 发布

阅读量1.1k

点赞数

文章标签： javascript css vue.js html5 es6

本文链接：https://blog.csdn.net/weixin_42289227/article/details/105272107

版权

一、事件监听

1、v-on：（语法糖@）的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on的基本使用</title>
</head>
<body>
<div id="app">
  <h2>{{counter}}</h2>
<!--  <button v-on:click="counter++">+</button>-->
<!--  <button v-on:click="counter--">-</button>-->
<!--  v-on：的语法糖   @-->
  <button v-on:click="increment">+</button>
  <button v-on:click="decrement">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',    //用于挂载要管理的元素
    data:{    //定义一些数据
      counter: 0
    },
    methods: {
      increment() {
        this.counter++
      },
      decrement() {
        this.counter--
      }
    }
  })
</script>
</body>
</html>

2、v-on参数问题

当通过methods中定义方法，以供@click调用时，需要注意参数问题：

情况一：如果该方法不需要额外参数，那么方法后的（）可以不添加，但是注意，如果方法本身有一个参数，那么会默认将原生事件event参数传递进去

情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on参数问题</title>
</head>
<body>
<div id="app">
  <!--情况一：事件调用的方法没有参数-->
  <button @click="btn1click">按钮1</button>
  <button @click="btn1click()">按钮1</button>


  <!--情况二-->
  <button @click="btn2click(123)">按钮2</button>
  <!--如果函数需要参数，但是没有传入，那么函数的形参为undefined-->
  <button @click="btn2click()">按钮2</button>
    <!-- 在事件定义写函数时省略了小括号，但是方法本身需要一个参数，
  这个时候vue会默认将浏览器产生的event事件对象作为参数传入到方法-->
  <button @click="btn2click">按钮2</button>

  <!--情况三：方法定义时，我们需要event对象，同时有需要其他参数-->
  <!--在调用方法时，如何手动的获取到浏览器参数的event对象：$event-->
  <button @click="btn2click(123,$event)">按钮3</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',    //用于挂载要管理的元素
    data:{    //定义一些数据
      
    },
    methods: {
      btn1click() {
        console.log('btn1click');
      },
      btn2click(abc) {
        console.log('--------',abc);
      },
      btn3click(abc,event) {
        console.log('+++',abc,event);
      }
    }
  })
</script>
</body>
</html>

3、v-on的修饰符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on的修饰符</title>
</head>
<body>
  <div id="app">
    <div @click="divClick">
      <!--1、停止冒泡-->
      <button @click.stop="btnClick">按钮</button>
    </div>

    <br/>
    <div>
      <form action="baidu">
        <!--2、.prevent 阻止默认事件-->
        <input type="submit" value="提交" @click.prevent="submitClick">
      </form>
    </div>

    <!--3、监听某个按键，此处监听回车键-->
    <input type="text" @keyup.enter="keyUp">

    <!--4、once修饰符,只在第一次点击有反应-->
    <button @click.once="btn2Click">按钮</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',    //用于挂载要管理的元素
      data:{    //定义一些数据
        message:'你好，vue'
      },
      methods: {
        btnClick() {
          console.log("btnClick");
        },
        divClick() {
          console.log("divClick");
        },
        submitClick() {
          console.log('submitClick');
        },
        keyUp() {
          console.log('keyUp');
        },
        btn2Click() {
          console.log('btn2Click');
        }
      }
    })
  </script>
</body>
</html>

二、条件判断

1、v-if的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-if的使用</title>
</head>
<body>
  <div id="app">
    <h2 v-if="isShow">
      {{message}}
    </h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',    //用于挂载要管理的元素
      data:{    //定义一些数据
        message:'你好，vue',
        isShow: true
      }
    })
  </script>
</body>
</html>

2、v-if 和 v-else 的结合使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-if和v-else的结合使用</title>
</head>
<body>
  <div id="app">
    <h2 v-if="isShow">
      {{message}}
    </h2>
    <h1 v-else>
      isShow为false时显示我
    </h1>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',    //用于挂载要管理的元素
      data:{    //定义一些数据
        message:'你好，vue',
        isShow: true
      }
    })
  </script>
</body>
</html>

3、v-if 和 v-else-if 和 v-else 的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-if和v-else-if和v-else的使用</title>
</head>
<body>

  <div id="app">
    <!--相比此种逻辑，使用计算属性较为简便-->
    <h2 v-if="score>=90">优秀</h2>
    <h2 v-else-if="score>=80">良好</h2>
    <h2 v-else-if="score>=60">及格</h2>
    <h2 v-else>不及格</h2>

    <h1>{{result}}</h1>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',    //用于挂载要管理的元素
      data:{    //定义一些数据
        score: 99
      },
      //使用计算属性较为简便
      computed: {
        result() {
          let showMessage=' ';
          if(this.score>=90){
            showMessage ='优秀'
          }
          else if (this.score>=80){
            showMessage ='良好'
          }
          else if(this.score>=60){
            showMessage ='及格'
          }
          else{
            showMessage ='不及格'
          }
          return showMessage
        }
      }
    })
  </script>

</body>
</html>