vue框架实现购物车项目

最新推荐文章于 2024-07-13 16:48:00 发布

Lubin_9527

最新推荐文章于 2024-07-13 16:48:00 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/Lubin_9527/article/details/82795392

版权

本文介绍了如何利用Vue框架的MVVM模型实现购物车功能，详细讲解了Vue中数据与视图的双向绑定，以及响应式框架的工作原理。

摘要由CSDN通过智能技术生成

使用vue框架实现购物车功能

vue框架简介

1：MVVM 模型
Model 模型 - 数据
View 视图 - html 标签，样式
ViewModel 用来结合模型和视图 - 决定数据展示在哪个标签上

2：vue中的数据和页面上标签内容是’绑定’在一起的，模型数据发生了变动，页面视图也会相应变化。这种特性称之为响应式框架。

实现代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--购物车表格-->
    <table border="1" width="100%">
        <thead>
        <tr>
            <td><input type="checkbox" v-model:checked="checkAll" @click="gouxuan()"></td>
            <td>编号</td>
            <td>名称</td>
            <td>价格</td>