1，vue计算属性

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .red1 {
        color: red;
      }
      .line {
        font-size: 40px;
      }
      .show1 {
        color: blue;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <p>computed：计算属性</p>
      <div>{{fulName}}</div>
      <div>得到总价：{{totalprice}}</div>
    </div>
  </body>
  <script src="vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        firstName: "le01",
        lastName: "james",
        book: [
          { id: 110, name: "编程艺术", price: 119 },
          { id: 111, name: "代码大全", price: 125 },
          { id: 112, name: "计算机原理", price: 98 },
        ],
      },
      computed: {
        fulName: function () {
          return this.firstName + "" + this.lastName;
        },
        // 计算属性的复杂应用：处理数据，返回新数据到页面，有缓存作用,只有数据有变化才重新渲染
        totalprice: function () {
          let result = 0;
          for (let i = 0; i < this.book.length; i++) {
            result += this.book[i].price;
          }
          return result;
        },
      },
      created: function () {},
    });
  </script>
  <script>
    // 对象定义 es5的写法
    const obj = {
      name: "why",
      age: 18,
      run: function () {
        console.log("在奔跑");
      },
      eat: function () {},
    };
    // 1，属性的增强写法
    const name2 = "www";
    const height2 = 1.8;
    // es5写法
    const obj = {
      name2: name2,
      height2: height2,
    };
    // es6写法, 1，属性的增强写法
    const obj = {
      name2,
      height2,
    };
    // 2，函数的增强写法
    const obj2 = {
      run() {
        console.log("在奔跑");
      },
      eat() {},
    };
  </script>
</html>

 

以上是 1，vue计算属性 的全部内容， 来源链接： utcz.com/z/380452.html

回到顶部