vue之v-on与v-if

最新推荐文章于 2024-04-07 12:20:26 发布
最新推荐文章于 2024-04-07 12:20:26 发布
阅读量603 收藏 1
点赞数
分类专栏： vue 学习总结 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sabstarb/article/details/106214915
版权

1、事件监听

1.1、v-on的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <h2>{{message}}</h2>
    <!--第一种:处理普通的操作-->
    <!--
      <button v-on:click="message++">+</button>
      <button v-on:click="message--">-</button>
     -->

    <!--第二种：可以处理复杂的操作-->
    <!--
      <button v-on:click="add">+</button>
      <button v-on:click="sub">-</button>
    -->

    <!--第三种：语法糖写法-->
    <button @click="add">+</button>
    <button @click="sub">-</button>
  </div>

  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        message: '0'
      },
      methods: {
        add() {
          return this.message++;
        },
        sub() {
          return this.message--;
        }
      }
    });
  </script>
</body>
</html>

在这里插入图片描述

1.2、v-on传参问题

  • 在不需要传参时，可以省略括号，需要传参时，在括号内传参。
    <div id="app">
      <!--1、不需要传入方法时，可以省略括号-->
      <button @click="btn1click">按钮一:有()</button><br/><br/>
      <button @click="btn1click">按钮一:无()</button><br/><br/>
      <!--2、需要传入参数时,传入数字时不加单引号也会直接解析成number类型
      传入符合规范的名字，但没有加单引号时vue会解析为变量去data找，找不到则报错
      -->
        <!--传入普通值时，显示普通值，传入this，则当前(el)dom对象-->
      <button @click="btn2click('abc')">按钮二:传参</button><br/><br/>
      <!--不传值，但显示括号不会报错，需要传的值为undefined-->
      <button @click="btn2click()">按钮二:不传参,有括号</button><br/><br/>
      <!--不传值，也不显示括号，vue默认会将浏览器生成的event事件作为参数传入-->
      <button @click="btn2click">按钮二:不传参,无括号</button><br/><br/>
      <!--3、既传入event事件，又传入普通参数-->
      <!--什么都不填，则默认第一个传入event对象，第二个传入undefined-->
      <button @click="btn3click">按钮三:无括号</button><br/><br/>
      <!--传入$event则表示传入的传入为event事件对象-->
      <button @click="btn3click('abc',$event)">按钮三:有括号</button>
    </div>
  
    <script>
      let vm = new Vue({
        el: '#app',
        data: {
          message:  ''
        },
        methods: {
          btn1click(){
            console.log("点击了btn1");
          },
          btn2click(name){
              console.log("btn2传入的参数值为：",name);
          },
          btn3click(name,event){
              console.log("btn3传入的参数值为：",name,event);
          }
        }
      });
    </script>

第一种情况：

在这里插入图片描述
第二种情况：
在这里插入图片描述
第三种情况：
在这里插入图片描述

1.3、v-on修饰符

  <div id="app">
    <div @click.stop="btnDIV">
      <!-- .stop阻止冒泡操作，就是内部元素在点击时，外部元素存在点击事件时也会触发 -->
      <button @click.stop="btnButton">点我</button>
      <!--压制原有元素的作用，如压制a标签使其提交表单-->
      <a class="a_submit" href="#" @click.prevent="aButton">点我</a>
      <!--压制默认行为，使其不让表单提交-->
      <form @submit.prevent></form>
      <!--串联操作-->
      <button @click.stop.prevent></button>
      <!--键修饰符，监听enter键，还可以使用按键的代码进行监听（像ASCII码）-->
      <input @keyup.stop.enter="enterInput"/>
      <!--只有第一次点击起作用，后面的无效-->
      <button @click.once="buttonOnce"></button>
    </div>
  </div>

  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        message: ''
      },
      methods: {
        btnButton() {
          console.log("btnButton");
        }, btnDIV() {
          console.log("btnDIV");
        }, aButton() {
          $(this).submit();
        },enterInput(){
          console.log("enterInput");
        },buttonOnce(){
          console.log("buttonOnce");
          
        }
      }
    });
  </script>

在这里插入图片描述

.native:是组件可以操作，未加组件不是不能实现点击等事件。
在这里插入图片描述

2、条件判断

2.1、v-if的使用

<div id="app">
    <h2 v-if="isShow">{{message}}</h2>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message:  '为true则显示我',
            isShow: false
        },
        methods: {}
    });
</script>

在这里插入图片描述

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

    <div id="app">
      <h2 v-if="isShow">{{showContent}}</h2>
      <h2 v-else>{{hideContent}}</h2>
    </div>
  
    <script>
      let vm = new Vue({
        el: '#app',
        data: {
          showContent:  '为true则显示我',
          hideContent:  '为false则显示我',
          isShow: false
        },
        methods: {}
      });
    </script>

在这里插入图片描述

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

使用标签：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>条件判断</title>
  <style>
    h2{
      display: inline-block;
    }
  </style>
  <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app"><h2>您的成绩：</h2>
      <h2 v-if="score>=90">优秀</h2>
      <h2 v-else-if="score>=80">良好</h2>
      <h2 v-else-if="score>=70">一般</h2>
      <h2 v-else-if="score>=60">及格</h2>
      <h2 v-else>差劲</h2>
    </div>
  
    <script>
      let vm = new Vue({
        el: '#app',
        data: {
          score: 90
        },
        methods: {}
      });
    </script>
</body>
</html>

在这里插入图片描述
使用计算属性：

<div id="app">
    <h2>您的成绩：{{result}}</h2>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            score: 90
        },
        computed: {
            result() {
                if (this.score >= 90) {
                    return "优秀";
                } else if (this.score >= 80) {
                    return "良好";
                } else if (this.score >= 70) {
                    return "一般";
                } else if (this.score >= 60) {
                    return "及格";
                } else {
                    return "差劲";
                }
            }
        }
    });
</script>

在这里插入图片描述

2.4、实战小案例

2.4.1、实现
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
      <span v-if="isUser">
          <label for="username">用户账号：</label>
          <input type="text" placeholder="用户账号" id="username">
      </span>
      <span v-else>
        <label for="email">用户邮箱：</label>
        <input type="text" placeholder="用户邮箱" id="email">
      </span>
        <button @click="isUser = !isUser">切换样式</button>
    </div>
  
    <script>
      let vm = new Vue({
        el: '#app',
          .
          message:  '',
          isUser :true
        },
        methods: {}
      });
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

8.4.2、小问题
  • 当点击切换样式时，用户输入的数据库不会被清空。

在这里插入图片描述
在这里插入图片描述

原理：

  • vue内部存在一个虚拟DOM,虚拟DOM不会直接把需要加载的html输出，而是先在虚拟DOM中渲染。
  • 如果存在两个相同的标签，并且不会同时显示时（v-if和v-else），它会处于对性能的考虑，对于标签进行复用。
  • vue不会删除标签再重新创建标签，而是将两个标签进行比对，只修改不同的地方（属性），在将不同的数据重新渲染到已存在的标签上，用户的数据vue不会做修改。
  • 虚拟DOM使用patch()函数将数据渲染到视图上。
    在这里插入图片描述
    在这里插入图片描述

解决方案：设置两个不同的key，即可解决用户输入数据不被处理的问题。

  • 使用不同key就不会服复用了。
    在这里插入图片描述

在这里插入图片描述

2.5、v-show

  • 和v-if有同样效果，但是实现的方式不同：
    • v-if：为false直接从DOM中删除，为true再加回来。
    • v-show：为false使用display：none隐藏，为true则删除display：none。
  • 开发选择：
    • 当显示和隐藏切换频繁时，使用v-show。
    • 当显示和隐藏切换不频繁，只有一次时，使用v-if。
<body>
    <div id="app">
      <h2 v-if="isShow">你好</h2>
      <h2 v-show="isShow">你好</h2>
    </div>
  
    <script>
      let vm = new Vue({
        el: '#app',
        data:{
          isShow:true
        }
      });
    </script>
</body>

在这里插入图片描述

要开心啊
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js常用指令汇总（v-if、v-for等）
10-21
本文将详细介绍Vue.js中的几个常用指令：v-if、v-for、v-show、v-bind和v-on。 1. **v-if** - 条件渲染指令，用于根据表达式的布尔值决定是否渲染元素。`v-if`更倾向于在条件不满足时避免编译和渲染元素，从而提高...
vue.js绑定事件监听器示例【基于v-on事件绑定】
10-18
Vue.js 是一款流行的前端框架，它提供了一种高效的方式来构建用户界面。...理解并熟练运用 `v-on` 是成为 Vue 开发者的基础技能之一。通过不断实践和探索，你可以创建出更加动态和交互丰富的用户界面。
vue中有关v-on和v-if的使用
Weightlessly的博客
07-22 602
v-on 监听 <button v-on:click="add">+</button> <button v-on:click="counter++">+</button> <button @click="add">+</button> 语法糖:@ 当通过methods中定义方法，以供@click调用时，需要注意参数问题： 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。但是注意如果方法本身中有一个参数，那么会默认将原生事
v-on,v-show,v-if,v-bind
zjnkkl的博客
09-27 161
vue不需要获取dom元素，直接通过this.data就可以获取data的数据，主要在于数据的改变 <template> <h2 @click="changeFood">{{food}}</h2> </template> <script> export default { data(){ return{ food:"西红柿" } }, methods:{ changeFood(){
【干货，Vue 事件监听v-on（简单使用，深入剖析原理
最新发布
weixin_57485542的博客
04-07 230
情况一不需要额外参数()可以不添加同时需要event时$event。
vue学习二(渲染、绑定元素特性、v-if、v-for、v-on、v-model、事件修饰)
全干工程师
09-26 897
文章目录声明式渲染绑定元素特性(v-bind:title=&amp;amp;quot;message&amp;amp;quot;)v-if(过渡效果)v-forv-on监听(v-on:click)v-model(双向绑定) 声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html lang=&
vue学习笔记（v-if v-on）
weixin_50310737的博客
01-14 188
vue自学笔记
v-if取反时打括号的重要性
qq_59076775的博客
06-01 951
v-if括号和不括号的区别
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
10-17
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下
Vue v-for中的 input 或 select的值发生改变时触发事件操作
10-14
通过`v-on:input`、`v-if`、`v-else-if`等指令，我们可以实现丰富的交互功能，如实时响应用户输入、控制内容的显示隐藏以及处理列表数据的变更。同时，理解Vue的响应式原理和事件处理机制对于编写高效、可维护的Vue...
v-if 条件指令
最爱喝怡宝的博客
11-12 333
单路分支 v-if 指令用于'条件性地'渲染一块内容 <h1 v-if="isShow">这是一个罪恶的h1</h1> let vm = new Vue({ el:'#app', data:{ isShow:true } 这是 isShow 为true，h1 的内容会被渲染出来，如果为false 则不会显示 双路分支渲染---- v-if v-else ...
Vue的基础语法-常用v-on、v-if、v-bind等指令的细节(最详细)
m0_71485750的博客
07-21 1397
v-bind指令是帮助我们动态绑定属性的**前面讲的一系列指令，主要是将值插入到模板内容**中。但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。比如动态绑定a元素的href属性；比如动态绑定img元素的src属性；绑定属性我们使用v-bind(以下是官方对v-bind的描述,看不懂了解即可,很多东西我们都是用不上缩写预期参数修饰符.camel-将kebab-caseattribute名转换为camelCase。用法。......
Vue基本指令：v-on,v-if,v-mode
qi341500的博客
02-27 1339
Vue基本指令 1、v-text指令：设置标签的文本值 2、v-html指令：设置标签的innerHTML 3、v-on指令：为元素绑定事件 4、v-on:传参 5、v-show指令：根据真假切换元素的显示状态 6、v-if指令：根据表达式的真假切换元素的显示状态 7、v-bind：为元素绑定属性 8、v-for指令：根据数据生成列表结构 9、v-mode：便捷的设置和获取表单元素的值
Vue官网学习（条件渲染 v-if指令）
CoderOu
06-28 411
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。 也就是返回v-if的值返回true的时候，这个dom元素会被渲染出来，并且显示，如果返回false，那么这个dom元素将不存在。 他与v-if的区别就是dom元素是否存在 <div v-if="true">我是内容</div> 也可以用 v-else 添加一个“else 块”： <h1 v-if="awesome">Vue is awesome!</h1>.
vue v-if和v-show的区别
红尘紫陌博客
03-06 1030
v-if:是vue 的一个内部指令，指令用在我们的html中。v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。v-show是调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。v-if 和v-show的区别：v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。v-show：调整css dispaly属性，可以使客户...
Vue.js教程-Vue基本指令
CoderHqf的博客
08-01 6528
Vue.js教程-Vue基本语法前言 前言 本章介绍Vue的基本语法。
VUE之v-if语句多个条件判断时的写法
热门推荐
初心不改
02-17 3万+
v-if满足某个条件condition = 0时，我们常见写法为： v-if="condition === 0" 假如我想同时满足多个条件时，要怎么写呢？ ① 普通写法： v-if="condition === 0 || condition === 1 || condition === 2" ② 简洁写法： v-if="[0, 1, 2].includes(condition)" <!--括号里可以是字符串和数字--> ③ 复杂用法： 标签中： v-if="matchState(activ
vue v-if未生效问题
左直拳的马桶_日用桶
09-14 2万+
事实证明，v-if本身是没有什么问题的，问题出在对应的变量身上。
Vue的v-on事件监听，v-if条件判断与v-for循环遍历
yanhua1575的博客
05-20 1万+
1.在Vue中监听事件使用v-on指令 v-on 作用：绑定事件监听器 缩写(语法糖）：@ （如v-on:click可简写为@click） 当通过methods中定义方法，以供@click调用时，需要注意参数问题： 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。 但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去，如果函数需要参数,但是没有传入, 那么函数的形参为undefined 情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入
vue的v-on如何延迟加载
04-28
Vue 的 v-on 指令是用于监听 DOM 事件并触发相应的方法的。它本身并不涉及延迟加载的问题。但是如果你想要在延迟加载后再绑定 v-on 事件，可以使用 Vue.js 提供的 $nextTick 方法。 $nextTick 会在下一次 DOM 更新循环结束之后执行延迟加载的回调函数。这样可以确保延迟加载的 DOM 元素已经被渲染出来并且可以绑定事件。 示例代码： ``` <template> <div ref="myDiv" v-if="show">Hello World</div> </template> <script> export default { data() { return { show: false } }, mounted() { this.$nextTick(() => { this.show = true; this.$refs.myDiv.addEventListener('click', this.handleClick); }) }, methods: { handleClick() { console.log('Clicked'); } } } </script> ``` 在上面的代码中，我们使用 v-if 指令控制了 DOM 元素的显示和隐藏。在 mounted 钩子函数中，我们使用 $nextTick 方法确保 DOM 元素已经被渲染出来。然后我们再绑定 click 事件并添加 handleClick 方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值