Vue计算属性

最新推荐文章于 2023-05-27 16:25:31 发布

爱捣鼓的XiaoPu

最新推荐文章于 2023-05-27 16:25:31 发布

阅读量91

点赞数

文章标签： vue.js javascript 前端 html

本文链接：https://blog.csdn.net/weixin_46287861/article/details/130030805

版权

Vue计算属性

简易购物车案例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>计算属性的使用</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.prod.js"></script>
  <style type="text/css">
    table.gridtable {
      font-family: verdana, arial, sans-serif;
      font-size: 11px;
      color: #333333;
      border-width: 1px;
      border-color: #666666;
      border-collapse: collapse;
      margin: 20px auto;
      width: 280px;
    }
    table.gridtable th {
      border-width: 1px;
      padding: 8px;
      border-style: solid;
      border-color: #666666;
      background-color: #dedede;
    }
    table.gridtable td {
      border-width: 1px;
      padding: 8px;
      border-style: solid;
      border-color: #666666;
      background-color: #ffffff;
    }
    table th:nth-child(1){
      width: 65px;
    }
  </style>
</head>
<body>
<div id="app">
  <table class="gridtable">
    <tr>
      <th colspan="2">
        学生姓名
      </th>
    </tr>
    <tr>
      <td>
        FirstName
      </td>
      <td>
        <input type="text" v-model="firstNa"/>
      </td>
    </tr>
    <tr>
      <td>
        LastName
      </td>
      <td>
        <input type="text" v-model="lastNa"/>
      </td>
    </tr>
    <tr>
      <td>
        FullName
      </td>
      <td>
        <input type="text" v-model.lazy="fullName"/>
<!--        .lazy 懒加载-->
      </td>
    </tr>
  </table>
  <table class="gridtable">
    <tr>
      <th>学科</th>
      <th>分数</th>
    </tr>
    <tr>
      <td>语文</td>
      <td><input type="text" v-model.number="chinese"/></td>
    </tr>
    <tr>
      <td>数学</td>
      <td><input type="text" v-model.number="math"/></td>
    </tr>
    <tr>
      <td>英语</td>
      <td><input type="text" v-model.number="english"/></td>
    </tr>
    <tr>
      <td>总分</td>
      <td><input type="text" v-model="getSums" readonly/></td>
    </tr>
    <tr>
      <td>平均分</td>
      <td><input type="text" v-model="getAverage" /></td>
    </tr>
  </table>

</div>
<script>
  const app = Vue.createApp({
    data() {
      return {
        lastNa:"",
        firstNa:"",
        chinese: 0,
        math: 0,
        english: 0,
      };
    },
    // 计算属性 用来计算数据的 用来代替methods 但是计算属性有缓存 set方法可以用来监听数据的变化 用来代替watch
    computed: {
      getAverage() {
        return (this.chinese + this.math + this.english) / 3;
      },
      getSums() {
        return this.chinese + this.math + this.english;
      },
      // fullName() {
      //   // return this.firstNa +" "+ this.lastNa;
      //   return `${this.firstNa} ${this.lastNa}`;
      //   // `` 模板字符串 ES6 新增 用来拼接字符串 用${}来拼接变量 用来代替+号
      // }
        fullName: {
            get() {
            return `${this.firstNa} ${this.lastNa}`;
            },
            set(value) {
            const names = value.split(" ");
            console.log(names);
            this.firstNa = names[1];
            this.lastNa = names[names.length-1];
            // .lazy 修饰符 用来监听数据的变化 用来代替watch
            }
        }
    },
    methods: {

    },
  }).mount("#app");
</script>
</body>
</html>

计算属性