vue中的计算属性使用

最新推荐文章于 2023-06-30 21:48:31 发布

正儿八经学前端

最新推荐文章于 2023-06-30 21:48:31 发布

阅读量354

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_42101753/article/details/106121700

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- 显示msg倒过来的结果 -->
      <!-- 
        对于将来需要在插值表达式或者指令中需要写复杂的逻辑的时候，都应该想到要使用计算属性。
       -->
      <h1>{{ reverseMsg }}</h1>
      <h1>{{ reverseMsg }}</h1>
      <h1>{{ reverseMsg }}</h1>
      <h1>{{ reverseMsg }}</h1>
      <h1>{{ reverseMsg }}</h1>
      <h1>{{ reverseMsg }}</h1>
      <h1>{{ reverseMsg }}</h1>
    </div>

    <script src="vue.js"></script>
    <script>
      /* 
        vue的计算属性 和 data中的属性差不多，也是给vue提供数据的
        vue的计算属性，指的是通过计算后才能得到的属性
      */
      // el  data methods
      const vm = new Vue({
        el: '#app',
        data: {
          name: 'zs',
          msg: 'hello vue'
        },
        // 给vue提供计算属性，，，计算属性也是属性，和data差不多， 这个属性需要一定的逻辑进行计算的
        computed: {
          // 计算属性的提供方式是一个函数，计算属性需要有计算的逻辑
          // reverseMsg写法是一个函数，但是reverseMsg使用的时候，是一个计算属性，对应的值函数的返回值
          // 好处1： 把复杂的逻辑放到计算属性中了， 模版变得 简洁
          // 好处2： 计算属性只要计算一次得到结果了，就会把结果给保存起来，以后直接用，效率非常高的
          // 好处3： 计算属性只有当依赖的属性发生了改变，计算属性就会重新计算

          // 计算属性和data的区分
          // 给vue提供数据，可以通过data，也可以通过计算属性
          // data中的数据都是可以确定的， 计算属性一般都是要通过data中的某个或者多个数据进行计算得来的。
          reverseMsg() {
            console.log('我执行了吗')
            return this.msg.split('').reverse().join('')
          }
        }
      })
    </script>
  </body>
</html>

正儿八经学前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中的计算属性使用

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl
复制链接

扫一扫