提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

vuejs学习小案例

案例学习 vuejs
2023-09-14 09:04:07 时间

1、购物车：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <style>
        [v-cloak] {
            display: none;
        }

        table {
            border: 1px solid #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
        }

        th, td {
            padding: 8px 16px;
            border: 1px solid #e9e9e9;
            text-align: center;
        }

        th {
            background: #f7f7f7;
            color: #5c6b77;
            font-weight: bold;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <template v-if="list.length">
        <table>
            <thead>
            <tr>
                <th></th>
                <th>商品名称</th>
                <th>商品单价</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in list">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button
                            @click="handleReduce(index)"
                            :disabled="item.count === 1">-
                    </button>
                    {{item.count}}
                    <button @click="handleAdd(index)">+</button>
                </td>
                <td>
                    <button @click="handleRemove(index)">移除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div>总价:${{ totalPrice }}</div>
    </template>
    <div v-else>购物车为空</div>
</div>
<script src="../../js/tool/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            list: [
                {id: 1, name: 'iphone', price: 6188, count: 1},
                {id: 2, name: 'iphone7', price: 6188, count: 1},
                {id: 3, name: 'iphone8', price: 6188, count: 1},
                {id: 4, name: 'iphone9', price: 6188, count: 1}
            ]
        },
        computed: {
            totalPrice: function () {
                var total = 0;
                for (var i = 0; i < this.list.length; i++) {
                    var item = this.list[i];
                    total += item.price * item.count;
                }
                return total.toString().replace(/\B(?=(\d{3})+$)/g, ',');
            }
        },
        methods: {
            handleReduce: function (index) {
                if (this.list[index].count === 1) return;
                this.list[index].count--;
            },
            handleAdd: function (index) {
                this.list[index].count++;
            },
            handleRemove: function (index) {
                this.list.splice(index, 1);
            }
        }
    })

</script>
</body>
</html>

效果：


***************************

2、Bootstrap添加，搜索关键字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加品牌</h3>
        </div>
        <div class="panel-body form-inline">
            <label>
                Id:
                <input type="text" class="form-control" v-model="id">
            </label>
            <label>
                Name:
                <input type="text" class="form-control" v-model="name">
            </label>
            <!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 -->
            <input type="button" value="添加" class="btn btn-primary" @click="add()">
            <label>
                搜索名称关键字：
                <input type="text" class="form-control" v-model="keywords">
            </label>
        </div>
    </div>

    <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Ctime</th>
            <th>Operation</th>
        </tr>
        </thead>
        <tbody>
        <!-- 通过search方法渲染数据，而是直接通过从data上面获取数据直接进行渲染 -->
        <tr v-for="item in search(keywords)" :key="item.id">
            <td>{{ item.id }}</td>
            <td v-text="item.name"></td>
            <td>{{ item.ctime }}</td>
            <td>
                <a href="" @click.prevent="del(item.id)">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>


<script src="../../js/tool/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            keywords: '', // 搜索的关键字
            list: [
                {id: 1, name: '奔驰', ctime: new Date()},
                {id: 2, name: '宝马', ctime: new Date()}
            ]
        },
        methods: {
            add() { // 添加的方法
                var car = {id: this.id, name: this.name, ctime: new Date()}
                this.list.push(car);
                this.id = this.name = '';
            },
            del(id) { // 根据Id删除数据
                var index = this.list.findIndex(item => {
                    if (item.id == id) {
                        return true;
                    }
                })
                this.list.splice(index, 1);
            },
            search(keywords) { // 根据关键字，进行数据的搜索
                return this.list.filter(item => {
                    if (item.name.includes(keywords)) {
                        return item;
                    }
                });
            }
        }
    });
</script>


</body>
</html>

效果：


*************************

3、

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

相关文章