vue中有关v-on和v-if的使用

最新推荐文章于 2024-05-16 09:41:57 发布

Weightlessly

最新推荐文章于 2024-05-16 09:41:57 发布

阅读量605

点赞数 4

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45860674/article/details/107523280

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

v-on 监听

<button v-on:click="add">+</button>
<button v-on:click="counter++">+</button>
<button @click="add">+</button>

语法糖:@

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

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

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

<body>
  <div id="app">
    <!-- 括号可加可不加 -->
    <button  @click="btn1click()">按钮1</button>

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


   <!-- 方法定义时，我们需要event对象，同时又需要其他参数 -->
   <!-- 在调用方法时，如何手动的获取到浏览器参数的event对象，$event  -->
   <!-- 传入abc会报错因为无abc变量，但是传入字符串'abc'就不会报错 -->
   <!-- 只单单传入一个数据 event会显示Undefined -->
   <button @click="btn3click('abc',$event)">按钮3</button>
    <button>按钮4 </button>

  </div>
</body>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      counter:0
    },
    methods:{
      btn1click(){
        console.log("btn1click");
      },
      btn2click(event){
        console.log(event,'-------');
      },
      btn3click(abc,event){
        console.log("++++++",abc,event);
      }
    }
  })
</script>

v-on 修饰符:

.stop 调用event.stopPropagation()

.prevent() 调用event.preventDefault()

.keyCode|keyAlias 只当事件是从特定键触发时才回调：

@keyup.enter 回车

@keyup.left 左键

@keyup.right 右键

@keyup.up 上键

@keyup.down 下键

@keyup.delete 删除键

.native 监听组件根元素的原生事件

.once只触发一次回调

<div id="app">
  <!-- 1.  .stop修饰符的使用 -->
  <div @click="divclick">
    aaaaaa
    <button @click.stop="btnclick">按钮</button>  <!-- 阻止事件冒泡 -->
  </div>
  <!-- 2. .prevent修饰符的使用 -->
  <!-- 阻止了Input的提交事件 -->
  <form action="baidu">
    <input type="submit" value="submit" @click.prevent="submitclick">
  </form>
    <!-- 3. 监听某个键盘的键帽 -->
  <input type="text" @keyup.enter="keyup">

  <!-- 4. .once -->
  <button @click.once="dothis">submit</button>
</div>

v-if使用

v-if后面的条件为false时，对应的元素以及其子元素不会渲染，也就是根本不会有对应的标签显示在DOM中

<h2 v-if='true'>{{message}}</h2>   
<h2 v-if='false'>{{message}}</h2>   
<h1 v-else>isshow为false时，显示我</h1>
    <!-- 不建议如下方式，可以用一个计算属性 -->
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2> 
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>

    computed:{
      result(){
        let showMessage = '';
        if(this.score>=90){
          showMessage = '优秀';
        }else if (this.score>=80){
          showMessage='良好';
        }else{
          showMessage='不及格'
        }
        return showMessage;
      }
    }

Weightlessly

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中有关v-on和v-if的使用

v-on 监听<button v-on:click="add">+</button><button v-on:click="counter++">+</button><button @click="add">+</button>语法糖:@当通过methods中定义方法，以供@click调用时，需要注意参数问题：情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。但是注意如果方法本身中有一个参数，那么会默认将原生事
复制链接

扫一扫