Vue.js知识——指令2、计算属性、事件监听

本文详细介绍了Vue.js中的v-bind、计算属性、事件监听v-on及其修饰符的用法。v-bind用于动态绑定属性,如链接和class。计算属性用于根据数据生成动态值,如总价计算。事件监听v-on则用于响应用户操作,可以使用修饰符如.stop、.prevent和.once来控制事件行为。此外,文章还展示了如何在方法中处理事件参数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

指令2

v-bind

v-bind可以动态获取超链接地址

 <div id="app">
     <a v-bind:href="ulr">百度一下</a>
 </div>
 <script>
     let app = new Vue({
         el:"#app",
         data:{
             ulr:"https://www.baidu.com",
         }
     })
 </script>

v-bind语法糖

去掉v-bind,只留下冒号:
<a :href="ulr">百度一下</a>

v-bind也可以用在更改class属性:

用法一:直接通过{ }绑定一个类
<h2 :class="{'active':isActive}">Hello Vue</h2>

用法二:也可以通过判断,传入多个值
用法三:和普通类同时存在时,并不冲突

<head>    
    <style>
        .acticve{
            color: blue;
        }
        .line{
            height: 200px;
            width: 100px;
            border: 1px solid blue;
        }
        .title{
            line-height: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 class="title" v-bind:class="{acticve:isActive,line:isLine}">哈哈!</h2>
        <button v-on:click="btnclick">点击变化样式</button>
    </div>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                ulr:"https://www.baidu.com",
                isActive:false,
                isLine:false,
            },
            methods:{
                btnclick:function(){
                    this.isActive = !this.isActive;
                    this.isLine = !this.isLine;
                }
            }
        })
    </script>
</body>

在这里插入图片描述
点击按钮之后:
在这里插入图片描述

用法四:如果过于复杂,也可以放在一个methods或者computed中。

<h2 :class="classes">Hello Vue</h2>
注:classes是一个计算属性

计算属性

    <div id="app">
        <h2>{{fullname}}</h2>
    </div>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                firstname:"LeBron",
                lastname:"James",
            },
            computed:{ //新的属性
                fullname : function(){
                    return this.firstname + ' '+ this.lastname;
                }
            }
        })
    </script>

计算复杂属性

    <div id="app">
        <h2>总价格:{{totalPrice}}</h2>
    </div>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                books:[
                    {id:110,name:"张三的一生",price:110},
                    {id:110,name:"张三的二生",price:160},
                    {id:110,name:"法外狂徒的一生",price:180},
                    {id:110,name:"张三颠沛流离的一生",price:230},
                    {id:110,name:"李四的一生",price:10},
                ]
            },
            computed:{
                totalPrice:function(){
                    let result = 0;
                    for(let i = 0; i<this.books.length;i++){
                        result += this.books[i].price;
                    }
                    return result;
                }
            }
        })
    </script>

在这里插入图片描述
computed 与 methods:

我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。

事件监听

在前端开发中,需要经常和用户交互,这个时候就必须监听用户发生的时间,比如点击、拖拽、键盘事件等等,那如何在Vue中监听事件呢?

使用v-on指令

v-on介绍

  1. 作用:绑定事件监听器
  2. 缩写:@
  3. 预期:Function | Inline Statement | Object
  4. 参数:event

语法糖:可以将v-on: 简写成@

<div id="app">
    <h2>当前计数:{{counter}}</h2>
    <button @click="add">+</button>
    <button @click="sub">-</button>
</div>
<script>
	const app = new Vue({
	    el: "#app",
	    data: {
	        counter: 0
	    },
	    methods: {
	        add() {
	            this.counter++;
	        },
	        sub() {
	            this.counter--;
	        }
	    },
	})
</script>

v-on的参数问题

在事件定义时,写方法时省略了小括号,但是方法本身是需要一个参数的,这个时候,Vue会默认将浏览器产生的event事件对象作为参数传入到方法

<body>
  <div id="app">
    <button @click="btn1">按钮一</button>
  </div>
  <script>
    const app = new Vue({
      el:"#app",
      methods:{
        btn1(event){
          console.log(event);
        }
      }
    })
  </script>
</body>

点击按钮会在控制台产生:
在这里插入图片描述

注意!
方法定义时,如果需要event对象,同时又需要其他参数,在调用方法时,如何手动获取浏览器参数event对象:$event

<button @click="btn1($event,event2)">按钮一</button>
<script>
 methods:{
   btn1(event,event2){
     console.log(event);
     console.log(event2);
     }
</script>

在这里插入图片描述

v-on 修饰符

.stop可以阻止事件冒泡

<button @click.stop="btn1">按钮一</button>

.prevent 可以取消默认事件

    <form action="baidu">
      <input type="submit" value="提交按钮" @click.prevent="submitclick">
    </form>

.once 只触发一次回调

<button @click.once="btn1">按钮一</button>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值