Vue-计算属性与事件监听

原创已于 2022-06-28 20:07:46 修改 · 337 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2021-08-22 12:46:15 首次发布

vue 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了Vue.js中的计算属性和事件监听。计算属性用于简化和优化模板中的表达式，例如计算全名或总价。复杂使用展示了如何使用reduce方法计算数组总价。事件监听部分涵盖基本的点击事件处理，参数传递，以及修饰符的用法，如.stop、.prevent、.enter和.once，展示了如何阻止事件冒泡、防止默认行为以及监听特定按键等。

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

计算属性

1、基本使用

<div id="app">
  <h2>{{getName()}}</h2>
  <!--计算属性-->
  <h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      firstName: 'qi',
      lastName: 'jing'
    },
    /*计算属性  */
    computed: {
      fullName: function(){
        return this.firstName+' ' + this.lastName
      }
    },
    methods: {
      getName: function(){
        return this.firstName+' '+this.lastName
      }
    }
  })
</script>

2、复杂使用

<div id="app">
  <h2>总价格：{{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello',
      books: [
        {id: 1, bookName:'深入计算机原理',price: 123},
        {id: 2, bookName:'深入计算机原理',price: 124},
        {id: 3, bookName:'深入计算机原理',price: 125},
        {id: 4, bookName:'深入计算机原理',price: 126},
      ]
    },
    computed: {
      totalPrice: function (){
        // let result = 0;
        // for(let i = 0;i<this.books.length;i++){
        //   result += this.books[i].price;
        // }
        // return result;
        return this.books.reduce((a,b)=>a+b.price,0)
      }
    }
  })
</script>

事件监听

1、基本使用

<div id="app">
  <h2>{{count}}</h2>
  <button @click="increment()">+</button>
  <button @click="decrement()">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      count: 0
    },
    methods: {
      increment() {
        this.count++;
      },
      decrement() {
        this.count--;
      }
    }
  })
</script>

2、参数问题

<div id="app">
  <button @click="btn01('abc')">按钮1</button>
  <!--在事件定义时，写方法省略了小括号，但是方法本身是需要一个参数的，VUE会默认
  将浏览器生产的event事件对象作为参数传入方法中-->
  <button @click="btn02">按钮2</button>
  <!--方法定义时，既需要普通参数，又需要event参数时 $event-->
  <button @click="btn03('12121',$event)">按钮3</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello'
    },
    methods :{
      btn01(str) {
        console.log('-----',str);
      },
      btn02(str) {
        console.log(str);
      },
      btn03(str,event) {
        console.log(str,event);
      }
    }
  })
</script>

3、修饰符

<!--1、.stop修饰符的使用-->
<div id="app" @click="divClick()">
  aaa
  <button @click.stop="btnClick()">按钮</button>
  <!--2、 prevent修饰符的使用-->
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick" >
  </form>
  <!--3、监听某个按键-->
  <input type="text" @keyup.enter="keyUp">
  <!--4、只让按钮在第一次有用-->
  <button type="button" @click.once="onceClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello'
    },
    methods: {
      divClick() {
        console.log('divClick');
      },
      btnClick() {
        console.log('btnClick');
      },
      submitClick() {
        console.log('submitClick');
      },
      keyUp() {
        console.log('keyUp');
      },
      onceClick() {
        console.log('onceClick');
      }
    }
  })
</script>