[JavaScript知识库]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>