Vuejs学习总结三（v-on/v-if/v-else-if/v-else）

最新推荐文章于 2024-05-14 21:04:35 发布

原来是小柒

最新推荐文章于 2024-05-14 21:04:35 发布

阅读量202

点赞数

分类专栏：前端学习文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42711899/article/details/105550046

版权

前端学习专栏收录该内容

20 篇文章 0 订阅

订阅专栏

本文是Vuejs学习的第三部分，重点介绍了v-on指令用于事件监听，包括语法糖、参数及修饰符的使用。同时，详细讲解了v-if、v-else-if和v-else条件指令，它们如何根据表达式控制元素的渲染，以及与JavaScript条件语句的相似性。建议在复杂场景下结合计算属性使用v-if以提升代码可读性。

摘要由CSDN通过智能技术生成

概述

在前端开发中，我们经常用于交互，这个时候我们必须监听用户发生的事件，比如：点击，拖拽，键盘事件等等
在vuejs中，我们使用v-on指令来实现这个功能。

v-on简介

v-on
作用：	绑定监听事件
缩写：	@
预期：	Function Inline Statement Object
参数：	event

v-on 的使用

 <h2>{{counter}}</h2>
<!--  <button v-on :click="counter++">+</button>-->
<!--  <button v-on :click="counter&--;">-</button>-->
  <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>

v-on 对应的语法糖

v-on:click也可以写成@click。

<!--  <button v-on:click="increment">+</button>-->
<!--  <button v-on:click="decrement">-</button>-->
  <button @click="increment">+</button>
  <button @click="decrement">-</button>

v-on参数

当通过methods中定义方法，以供@click调用时，需要注意参数问题：
1.如果该方法不需要额外参数，那么方法后的（）可以不添加；但是主要注意的是：如果方法本身中有一个参数，那么默认将原生事件event参数传递出去
2.如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

<body>
<div id="app">
<!--    1.事件调用的方法没有参数-->
  <button @click="btn1Click()">按钮1</button>
  <button @click="btn1Click">按钮1</button>
<!--  2.在事件定义时，写方法时省略了小括号，但是方法本身是一个参数的，这个时候， vue会默认将浏览器生产的event事件对象作为参数传入到方法中-->
  <button @click="btn2Click">按钮2</button>
<!--  3.在方法定义时，我们需要event对象时，同时又需要其他参数-->
<!--  在调用方法时，我们如何手动的获取浏览器参数的event对象：$event-->
  <button @click="btn3Click(abc,$event)">按钮3</button>
  <button @click="btn3Click">按钮5</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀',
            abc: 123
        },
    methods: {
          btn1Click() {
           console.log("btn1Click");
          },
          btn2Click(abc) {
          console.log('-------',abc);
      }, 
          btn3Click(abc,event) {
          console.log('=======',abc,event);
        }
      }
    })
</script>
</body>

v-on修饰符

在某些情况下，我们拿到event的目的可能是进行一些事件处理；vue提供了一些修饰符来供我们处理一些事件：

修饰符	作用
.stop	调用event.stopPropagation()
.prevent	调用event.preventDefault()
.native	监听组件根元素的原生事件
.once	只触发一次回调
.{keyCode	keyAlias}

<div id="app">
<!--  1.stop修饰符的使用:阻止事件冒泡-->
  <div @click="divClick">
  <button @click.stop="btnClick">按钮</button>
  </div>
<!--  2..prevent修饰符的使用-->
  <br>
  <form action="百度">
    <input type="submit" vale="提交" @click.prevent="submitClick">
  </form>
<!--  3.。监听某个键盘的键帽-->
  <input type="text" @keyUp.enter="keyUp">
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好呀'
        },
    methods: {
          btnClick() {
            console.log("btnClick");
          },
     	 divClick() {
       		 console.log("divClick");
      },
     	 submitClick() {
        	console.log("submitClick");
      },
     	 keyUp() {
            console.log('keyUp');
      }
    }
    })

v-if、v-else-if、v-else

v-if、v-else-i条件为flasef、v-else，这三个指令与JavaScript中的条件语句if else else if 类似，vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或者组件
v-if的原理：v-if后面的条件为flase时，对应的元素以及其子元素不会渲染，也就是根本没有对应的标签出现在DOM中

<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='良好'
              }
              return showMessage
            }
          }
      }

在较为复杂的情况下，我们应该使用计算属性来定义，这样可以提高代码的可阅读性。

原来是小柒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs学习总结三（v-on/v-if/v-else-if/v-else）

概述在前端开发中，我们经常用于交互，这个时候我们必须监听用户发生的回家爱你，比如：点击，拖拽，键盘事件等等在vuejs中，我们使用v-on指令来实现这个功能。v-on简介v-on作用：绑定监听事件缩写：@预期：Function Inline Statement Object参数：eventv-on 的使用 <h2>{{...
复制链接

扫一扫

专栏目录