Vue.js购物车小案例

绝知此事要躬行呀

已于 2022-07-23 18:20:42 修改

阅读量577

点赞数 2

文章标签： vue.js 前端 javascript

于 2022-07-23 18:15:48 首次发布

本文链接：https://blog.csdn.net/m0_67640165/article/details/125950866

版权

本文通过一个购物车小案例，介绍了如何运用Vue.js的v-on（@）、v-if/v-else、v-for和v-bind指令。案例涵盖了事件监听、条件渲染、循环遍历以及动态绑定等功能，适合前端新手学习。

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

运用vue的指令来做的一个购物车小案例

1.使用了 v-on监听事件、v-if和v-else条件指令 v-for循环、v-bind动态绑定

v-on的缩写是@

v-bind的缩写是：

2.购物车CSS表格样式

 table {
      border: 1px solid #e9e9e9;
      border-collapse: collapse;
      border-spacing: 0 ;
    }
    th,td {
      padding: 8px 16px;
      border: 1px solid #e9e9e9;
      text-align: left;
    }
    th {
      background-color: #f7f7f7;
      color: #5c6b77;
      font-weight: 600;
    }
    #shopping {
      color: red;
    }

3.HTML

<body>
      <div id="app" >
        <div v-if="books.length">   //设置条件，如果购物车没有为空
        <table>
          <thead>
           <tr><th></th>
          <th>书籍名称</th>
        <th>出版日期</th>
      <th> 价格</th>
    <th>数量</th>
  <th>操作</th>
  </tr>
          </thead>

          <tbody>