2018-09-21

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    table{
        width: 70%;
        margin: 0 auto;
        border-collapse: collapse;
        text-align: center;
    }
    th{
        padding: 10px 0;
    }
    td{
        padding: 15px 0;
    }
    </style>
</head>
<body>
   <div id="app">
       <my-father></my-father>
   </div>
    <script src="js/vue.js"></script>
    <script>
    Vue.component("my-father",{
        template:`
            <div>
                <table border="1">
                    <tr>
                        <th v-for="value in list">{{value}}</th>
                    </tr>
                    <tr v-for="(val,index) in content">
                        <td>{{index+1}}</td>
                        <td>{{val.name}}</td>
                        <td>{{val.price}}</td>
                        <td><button @click="alt(index)">+</button>{{val.cont}}<button @click="res(index)">-</button></td>
                        <td>{{val.all}}</td>
                    </tr>
                    <my-child v-bind:mes="msg"></my-child>
                </table>
            </div>
        `,
        data:function(){
            return{
                list:["编号","名称","单价","数量","小计"],
                content:[
                    {name:"香蕉",price:1,cont:1,all:1},
                    {name:"苹果",price:2,cont:1,all:2},
                    {name:"鸭梨",price:3,cont:1,all:3}
                ],
                msg:'6'
            }
        },
        methods:{
            alt:function(i){
                this.content[i].cont++;
                this.content[i].all=this.content[i].cont*this.content[i].price;
                this.total();
            },
            res:function(i){
                if(this.content[i].cont>0){
                    this.content[i].cont--;
                    this.content[i].all=this.content[i].cont*this.content[i].price;
                }
                this.total();
            },
            total:function(){
                for(var i=0,total=0;i<this.content.length;i++){
                    total+=this.content[i].all;
                }
                this.msg=total;
            }
        }
    })
    Vue.component("my-child",{
        props:["mes"],
        template:`
            <tr>
                <td colspan="5">总价：{{mes}}元</td>
            </tr>
        `
    })
    new Vue({
        el:"#app"
    })
    </script>
</body>
</html>
2018-09-21

推荐阅读更多精彩内容
