【vue小案例--实现简单购物车】

最新推荐文章于 2024-07-12 15:14:43 发布

是瑶妹儿

最新推荐文章于 2024-07-12 15:14:43 发布

阅读量54

点赞数

分类专栏： vue小练习文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_47168657/article/details/134249556

版权

vue小练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

案例

一、实现购物车
二、选中样式改变案例：

一、实现购物车

效果图：
在这里插入图片描述

二、选中样式改变案例：

效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" >
    <style>
        input{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <label :class="[isChecked ? 'glyphicon glyphicon-expand' : 'glyphicon glyphicon-unchecked']"><input type="checkbox" v-model="isChecked" @change="change"></label> -->
        <ul>
            <li v-for="item in arr" :key="item.id">
                <label :class="[item.isChecked ? 'glyphicon glyphicon-expand' : 'glyphicon glyphicon-unchecked']"><input type="checkbox" v-model="item.isChecked"></label> {{item.name}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                isChecked:false,
                arr:[
                    {id:1,name:"a",isChecked:false},
                    {id:2,name:"b",isChecked:false},
                    {id:3,name:"c",isChecked:false}
                ]
            },
            methods:{
                change(){
                    console.log(this.isChecked);
                }
            }
        })
    </script>
</body>
</html>