这个页面用 vue.js 怎么写?

《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
最佳答案
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

    <head>

        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>Title</title>
    </head>

    <body>

    <div id="app">

            <table class="table">
                <thead class="thead-light">
                    <tr>
                        <th scope="col">名称</th>
                        <th scope="col">单价<button @click="asc = true">↑</button><button @click="asc = false">↓</button></th>
                        <th scope="col">数量</th>
                        <th scope="col">合计</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(x, i) in list">
                        <td>{{ x.name }}</td>                     
                        <td>{{ x.price }}</td> 
                        <td>
                        <button @click="reduce(x, i)">-</button>    
                        {{ x.num }}
                        <button @click="increace(x, i)">+</button>    
                        </td>
                        <td>{{ x.num * x.price }}</td>
                    </tr>
                </tbody>
            </table>          
            <Br>
            <p >总金额:{{ all }}</p>
            <hr>
            <div>
                <input type="checkbox" id="checkbox" v-model="checked">
                <span>使用8折优惠卷:-{{ checked ? all * 0.2 : 0}}
                <hr>
                <strong>合计:</strong>{{ checked ? all * 0.8 : all }}
                <hr>
                </span>
            </div>

            <div>
                <form @submit.prevent="submit">
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input v-model="msg.name" placeholder="请输入商品名">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input v-model="msg.price" placeholder="请输入单价">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="submit" value="添加商品">
                </form>
            </div>
        </div>
        <script>
                var model={
                    info: [{
                        name: "iphone7",
                        price: 6000,
                        num: 1,
                        total: 6000
                    }, {
                        name: "荣耀6x",
                        price: 1200,
                        num: 1,
                        total: 1200
                    }, {
                        name: "dell笔记本",
                        price: 4000,
                        num: 1,
                        total: 4000
                    }],
                    checked:false,
                    msg: {},
                    asc: false
                }

                var vm = new Vue({
                    el: "#app",
                    data: model,
                    computed: {
                    //商品总价
                        all() {
                            let total = 0;
                            for (let index = 0; index < this.info.length; index++) {
                                const {num, price} = this.info[index]
                                total += num * price
                            }
                            return total
                        },
                        list() {

                            if (!this.asc) {
                                return this.info.sort((a,b)=>b.price - a.price)
                            } else {
                                return this.info.sort((a,b)=>a.price - b.price)
                            }

                        }
                    },
                    methods: {
                        reduce: function(x, i) {
                            // this.info[i].num = x.num - 1
                            if(x.num>0){
                                x.num = x.num - 1
                            }
                        },
                        increace: function(x, i) {
                            // this.info[i].num = x.num + 1
                            x.num = x.num + 1
                        },                    
                        submit: function() {
                            //console.log(this.msg);
                             vm.info.push({
                                 name: this.msg.name,
                                 price: this.msg.price,
                                 num: 1,
                                 total:this.msg.price
                             });
                             this.msg={ name:'',price:''}                            
                        }
                    }

                })
        </script>
    </body>

</html>
5年前 评论
讨论数量: 1
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

    <head>

        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <title>Title</title>
    </head>

    <body>

    <div id="app">

            <table class="table">
                <thead class="thead-light">
                    <tr>
                        <th scope="col">名称</th>
                        <th scope="col">单价<button @click="asc = true">↑</button><button @click="asc = false">↓</button></th>
                        <th scope="col">数量</th>
                        <th scope="col">合计</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(x, i) in list">
                        <td>{{ x.name }}</td>                     
                        <td>{{ x.price }}</td> 
                        <td>
                        <button @click="reduce(x, i)">-</button>    
                        {{ x.num }}
                        <button @click="increace(x, i)">+</button>    
                        </td>
                        <td>{{ x.num * x.price }}</td>
                    </tr>
                </tbody>
            </table>          
            <Br>
            <p >总金额:{{ all }}</p>
            <hr>
            <div>
                <input type="checkbox" id="checkbox" v-model="checked">
                <span>使用8折优惠卷:-{{ checked ? all * 0.2 : 0}}
                <hr>
                <strong>合计:</strong>{{ checked ? all * 0.8 : all }}
                <hr>
                </span>
            </div>

            <div>
                <form @submit.prevent="submit">
                &nbsp;&nbsp;&nbsp;&nbsp;
                <input v-model="msg.name" placeholder="请输入商品名">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input v-model="msg.price" placeholder="请输入单价">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="submit" value="添加商品">
                </form>
            </div>
        </div>
        <script>
                var model={
                    info: [{
                        name: "iphone7",
                        price: 6000,
                        num: 1,
                        total: 6000
                    }, {
                        name: "荣耀6x",
                        price: 1200,
                        num: 1,
                        total: 1200
                    }, {
                        name: "dell笔记本",
                        price: 4000,
                        num: 1,
                        total: 4000
                    }],
                    checked:false,
                    msg: {},
                    asc: false
                }

                var vm = new Vue({
                    el: "#app",
                    data: model,
                    computed: {
                    //商品总价
                        all() {
                            let total = 0;
                            for (let index = 0; index < this.info.length; index++) {
                                const {num, price} = this.info[index]
                                total += num * price
                            }
                            return total
                        },
                        list() {

                            if (!this.asc) {
                                return this.info.sort((a,b)=>b.price - a.price)
                            } else {
                                return this.info.sort((a,b)=>a.price - b.price)
                            }

                        }
                    },
                    methods: {
                        reduce: function(x, i) {
                            // this.info[i].num = x.num - 1
                            if(x.num>0){
                                x.num = x.num - 1
                            }
                        },
                        increace: function(x, i) {
                            // this.info[i].num = x.num + 1
                            x.num = x.num + 1
                        },                    
                        submit: function() {
                            //console.log(this.msg);
                             vm.info.push({
                                 name: this.msg.name,
                                 price: this.msg.price,
                                 num: 1,
                                 total:this.msg.price
                             });
                             this.msg={ name:'',price:''}                            
                        }
                    }

                })
        </script>
    </body>

</html>
5年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!