vue 简单购物计算

  <div id="app">

      <!-- table>(thead>tr>td*6)+(tbody>tr>td*6) -->

      <!-- 结尾 ctrl+i 激活提示, 按回车 -->

      <table border="1">

        <thead>

          <tr>

            <!-- v-model 双向绑定 -->

            <!-- 1. 数据影响DOM元素 -->

            <!-- 2. DOM元素变化时影响数据 -->

            <!-- 看实际需求决定要不要双向绑定 -->

            <!-- checked: 普通的HTML属性, 代表是否勾选 -->

            <td>

              <input

                @change="chaChanged"

                type="checkbox"

                :checked="cha_status"

              />全选

            </td>

            <td>序号</td>

            <td>名称</td>

            <td>单价</td>

            <td>数量</td>

            <td>小计</td>

            <td>操作</td>

         

          </tr>

        </thead>

        <tbody>

          <!-- 循环的 参数变量名随意 -->

          <tr v-for="(p,i) in products">

            <td><input type="checkbox" v-model="p.checked" /></td>

            <td>{{i+1}}</td>

            <td>{{p.name}}</td>

            <td>¥{{p.price}}</td>

            <td>

              <button :disabled="p.count==1" @click="p.count--">-</button>

              <span>{{p.count}}</span>

              <button @click="p.count++">+</button>

            </td>

            <td>¥{{p.price * p.count}}</td>

            <td>

              <!-- 数组方法：删除指定序号的元素?? -->

              <!-- 数组.splice(i,a,b): 从序号i位置删除a个元素, 然后添加b元素到里面 -->

              <button @click="products.splice(i,1)">删除</button>

            </td>

          </tr>

        </tbody>

        <tfoot>

          <tr>

            <!-- 计算属性total, 不需要()就能触发 -->

            <td colspan="8">合计: {{total}}</td>

          </tr>

        </tfoot>

      </table>

    </div>

    <script src="./vendor/vue.js"></script>

    <script>

      new Vue({

        el: '#app',

        methods: {

          // 全选按钮点击后, 值变化时触发

          chaChanged(e) {

            console.log(e)

            //读取勾选框的

            const checked = e.target.checked

            // 把每个商品的勾选框状态, 都等于 全选按钮的

            this.products.forEach(v => v.checked = checked)

            // v : value的缩写, 因为懒..

          },

        },

        // 计算属性: 使用时不用() 就会自动基础

        computed: {

          // 全选->每一个都是选中

          cha_status() {

            // js 的day03 高阶函数

            return this.products.every(value => value.checked)

          },

          total() {

            return this.products.reduce((sum, value) => {

              const { price, count, checked } = value

              // 利用 checked是布尔类型, true->1  false->0

              // 乘0 =0 的特点, 只计算勾选是true的商品总和

              return sum + price * count * checked

            }, 0)

          },

        },

        data: {

          products: [

            // checked: 代表是否勾选

            { name: '高达', price: 99, count: 5, checked: true },

            { name: '奥特曼', price: 9900, count: 15, checked: false },

            { name: '迪迦', price: 199, count: 1, checked: false },

            { name: '龙珠', price: 299, count: 5, checked: true },

          ],

        },

      })

    </script>

  </body>