Vue之利用指令和computed计算属性实现简单的购物车

最新推荐文章于 2023-06-16 21:30:04 发布

原创

最新推荐文章于 2023-06-16 21:30:04 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文探讨Vue核心特性，通过指令和computed计算属性实现购物车功能。涉及Vue中v-model的双向数据绑定原理及计算属性的运用，结合HTML和JS代码展示具体业务逻辑。

Vue的本质就是实现数据操作DOM
购物车的知识点：

对于vue中computed计算属性的理解
对于vue中双向数据绑定的理解的运用v-model
业务逻辑的处理

HTMl部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shoppingdemo</title>
    <style>
        table{
            border: 1px solid black;
        }
        table th{
            border: 1px solid black;
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <table >
        <thead>
        <tr>
            <th style="width: 20px"></th>
            <th>商品名称</th>
            <th>商品单价</th>
            <th>购买数量</th>
            <th>操作</th>
            <th>单选</th>
        </tr>
        </thead>
        <tbody >
            <tr v-for="(item,i) in shops" key="item">