vue数据的双向绑定跟购物车案例

最新推荐文章于 2024-11-12 16:34:34 发布

m0_58310590

最新推荐文章于 2024-11-12 16:34:34 发布

阅读量990

点赞数 30

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_58310590/article/details/139050703

版权

【数据双向绑定】

# 1 针对 input 标签--》页面中输入值--》js中有对应变量

# 2 数据单向绑定：变量变---》页面变；页面变--》变量不会变
# 3 数据双响绑定：相互影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>数据单向绑定</h1>
    <input type="text" :value="name">
    <h1>数据双向绑定</h1>
    <input type="text" v-model="name2">


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'maojing',
            name2:'刘亦菲'

        }


    })


</script>
</html>

![对于input标签的事件处理，你提到的事件基本正确，但是focus事件确实是当输入框获得焦点时触发的事件，而不是当元素失去焦点时触发的。你可能混淆了focus和blur事件。

所以，正确的事件应该是：

input：当输入框进行输入时触发的事件。
change：当输入框的值发生改变并且失去焦点时触发的事件。
blur：当输入框失去焦点时触发的事件。
focus：当输入框获得焦点时触发的事件。

如果你想要在Vue.js中处理这些事件，可以使用v-on指令来监听相应的事件，然后执行对应的处理函数。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>数据单向绑定</h1>
    <input type="text" :value="name">
    <h1>数据双向绑定</h1>
    <input type="text" v-model="name2">

<!-- 当输入框进行输入的时候  触发的事件
    change 当元素的直发生改变时 触发事件
    blur 当输入框失去焦点（就是你鼠标不在input里面的时候）触发事件
    focus 当获得焦点的时候  触发事件
 -->
    <input v-on:input="handleInput" v-on:change="handleChange" v-on:focus="handleFocus" v-on:blur="handleBlur">

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: 'maojing',
            name2:'刘亦菲'

        },
        methods: {
            handleInput: function(event) {
                console.log('输入框的值：', event.target.value);
            },
            handleChange: function(event) {
                console.log('输入框的值改变了：', event.target.value);
            },
            handleFocus: function() {
                console.log('输入框获得焦点了');
            },
            handleBlur: function() {
                console.log('输入框失去焦点了');
            }
        }


    })

</script>

</html>

【过滤案例】

判断数据是否在文本是否存在

if(item.indexOf(_this.Text)>=0){
                        return true;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">

    <h1>过滤案例</h1>
    <input type="text" v-model="Text" @input="Input">
    <hr>
    <ul>
        <li v-for="item in newdata_list">{{item}}</li>
    </ul>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            data_list:['剑来','人剑','犯剑','剑人','登山','登山者','登山老者','梦', '梦里','在梦里','想做梦'],
            newdata_list:['剑来','人剑','犯剑','剑人','登山','登山者','登山老者','梦', '梦里','在梦里','想做梦'],
        },
        methods:{
            Input(event){
                var _this = this;
                this.newdata_list = this.data_list.filter(function(item){
                    if(item.indexOf(_this.Text)>=0){
                        return true;
                    }else{
                        return false;
                    }
                })
            }
        }

    })

</script>

</html>

购物车示例一

基础

实现方法：

当调用 Price() 方法时，它会遍历 check_list 中的每个选中的商品，然后计算每个商品的价格乘以数量的总和，最后返回总价。具体实现步骤如下：

在 Vue 实例的 methods 中定义了一个 Price() 方法。
在该方法中，首先初始化一个变量 total，用于存储总价格，初始值为 0。
使用 for...of 循环遍历 check_list 中的每个选中的商品对象。
在循环中，获取当前商品的价格 item.price 和数量 item.count，然后将它们相乘，并累加到 total 变量中。
循环结束后，返回累加后的 total，即为所有选中商品的总价格。

就是在表单里面写一个td 添加一个checkbox单选框在用v-model = "lcheck_list" 数据双向绑定。

   <td><input type="checkbox" v-model="check_list" :value="item"></td>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .container {
            margin-top: 50px;
        }
    </style>
</head>


<body>
<div id="table">
    <div class="container">
        <h1 class="text-center">购物车列表</h1>
        <button class="btn btn-danger" @click="handleLoad">加载购物车</button>
        <table class="table table-bordered text-center">
            <thead>
            <tr>
                <th>商品id</th>
                <th>商品名</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in table_list" :class="index%2==0?'table-danger':'table-primary'">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.price }}</td>
                <td>{{ item.count }}</td>
                <td><input type="checkbox" v-model="check_list" :value="item"></td>
            </tr>
            </tbody>
        </table>
        <hr>
        <h3>选中的商品: {{check_list}}</h3>
        <h3>总价格: {{Price()}}</h3>
    </div>
</div>
</body>

<script>
    new Vue({
        el: '#table',
        data: {
            table_list: [

            ],
            check_list:[]
        },
        methods: {
            handleLoad() {
                this.table_list = [
                    {id: 1, name: '马丁靴', price: 124, count: 10},
                    {id: 2, name: '玛莎拉蒂', price: 65, count: 5},
                    {id: 3, name: "457", price: 65, count: 5},
                    {id: 4, name: "星光", price: 65, count: 6},
                    {id: 5, name: 'huawei', price: 65, count: 6},
                    {id: 6, name: "xiaomi", price: 65, count: 6},
                ]
            },
            Price(){
                var total = 0
                for (var item of this.check_list) {
                    total += item.price * item.count
                }
                return total
            }
        }
    })
</script>
</html>

购物车示例二

进阶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .container {
            margin-top: 50px;
        }
    </style>
</head>


<body>
<div id="table">
    <div class="container">
        <h1 class="text-center">购物车列表</h1>
        <button class="btn btn-danger" @click="handleLoad">加载购物车</button>
        <table class="table table-bordered text-center">
            <thead>
            <tr>
                <th>商品id</th>
                <th>商品名</th>
                <th>商品价格</th>
                <th>商品数量</th>
                    <!--       写一个复选框、数据的双向绑定、一个聚焦事件         -->
                <th>全选/不选<input type="checkbox" v-model="checkAll"@change="handchange"></th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in table_list" :class="index%2==0?'table-danger':'table-primary'">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.price }}</td>
                <td>{{ item.count }}</td>
                <td><input type="checkbox" v-model="check_list" :value="item" @change="handCheck"></td>
            </tr>
            </tbody>
        </table>
        <hr>
        <h3>选中的商品: {{check_list}}</h3>
        <h3>是否全选:{{checkAll}}</h3>
        <h3>总价格: {{Price()}}</h3>
    </div>
</div>
</body>

<script>
    new Vue({
        el: '#table',
        data: {
            table_list: [

            ],
            check_list:[]
        },
        methods: {
            //加载购物车数据
            handleLoad() {
                this.table_list = [
                    {id: 1, name: '马丁靴', price: 124, count: 10},
                    {id: 2, name: '玛莎拉蒂', price: 65, count: 5},
                    {id: 3, name: "457", price: 65, count: 5},
                    {id: 4, name: "星光", price: 65, count: 6},
                    {id: 5, name: 'huawei', price: 65, count: 6},
                    {id: 6, name: "xiaomi", price: 65, count: 6},
                ]
            },
            // 计算商品的总价格
            Price(){
                var total = 0

                for (var item of this.check_list) {
                    total += item.price * item.count
                }
                return total
            },
            // 全选/不选
            handchange() {
                // 这里的this.checkAll的是上面 v-model
                // <th>全选/不选<input type="checkbox" v-model="checkAll"@change="handchange"></th>
                if (this.checkAll) {
                    //全选
                    this.check_list = this.table_list
                } else {
                    //不选
                    this.check_list = []
                }
            },
            // 更新全选/不选的状态
            handCheck() {
                if (this.check_list.length == this.table_list.length) {
                    this.checkAll = true
                }else{
                    this.checkAll = false
                }
            },
        }
    })
</script>
</html>

购物车示例三

终版

你的handjian方法接收一个参数item，表示商品对象。在模板中，你可以通过@click指令将商品对象传递给handjian方法。

<td><button @click="handjian(item)">-</button></td>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .container {
            margin-top: 50px;
        }
    </style>
</head>


<body>
<div id="table">
    <div class="container">
        <h1 class="text-center">购物车列表</h1>
        <button class="btn btn-danger" @click="handleLoad">加载购物车</button>
        <table class="table table-bordered text-center">
            <thead>
            <tr>
                <th>商品id</th>
                <th>商品名</th>
                <th>商品价格</th>
                <th>商品数量</th>
                    <!--       写一个复选框、数据的双向绑定、一个聚焦事件         -->
                <th>全选/不选<input type="checkbox" v-model="checkAll"@change="handchange"></th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in table_list" :class="index%2==0?'table-danger':'table-primary'">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.price }}</td>
                <td><button @click="handjian(item)">-</button>
                    {{ item.count }}
                    <button @click="item.count++">+</button></td>
                <td><input type="checkbox" v-model="check_list" :value="item" @change="handCheck"></td>
            </tr>
            </tbody>
        </table>
        <hr>
        <h3>选中的商品: {{check_list}}</h3>
        <h3>是否全选:{{checkAll}}</h3>
        <h3>总价格: {{Price()}}</h3>
    </div>
</div>
</body>

<script>
    new Vue({
        el: '#table',
        data: {
            table_list: [

            ],
            check_list:[]
        },
        methods: {
            //加载购物车数据
            handleLoad() {
                this.table_list = [
                    {id: 1, name: '马丁靴', price: 124, count: 10},
                    {id: 2, name: '玛莎拉蒂', price: 65, count: 5},
                    {id: 3, name: "457", price: 65, count: 5},
                    {id: 4, name: "星光", price: 65, count: 6},
                    {id: 5, name: 'huawei', price: 65, count: 6},
                    {id: 6, name: "xiaomi", price: 65, count: 6},
                ]
            },
            // 计算商品的总价格
            Price(){
                var total = 0

                for (var item of this.check_list) {
                    total += item.price * item.count
                }
                return total
            },
            // 全选/不选
            handchange() {
                // 这里的this.checkAll的是上面 v-model
                // <th>全选/不选<input type="checkbox" v-model="checkAll"@change="handchange"></th>
                if (this.checkAll) {
                    //全选
                    this.check_list = this.table_list
                } else {
                    //不选
                    this.check_list = []
                }
            },
            // 更新全选/不选的状态
            handCheck() {
                if (this.check_list.length == this.table_list.length) {
                    this.checkAll = true
                }else{
                    this.checkAll = false
                }
            },
            handjian(item){//传对象进来
                if(item.count>1){
                    item.count--
                }else{
                    alert('至少选择一个，亲！！！')
                }

            }
        }
    })
</script>
</html>