通过vue3创建简单的书籍表单

最新推荐文章于 2024-01-29 22:30:41 发布

weixin_44194740

最新推荐文章于 2024-01-29 22:30:41 发布

阅读量338

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_44194740/article/details/126753519

版权

<div id="app">
      <table style="margin: auto">
        <tr>
          <th v-for="item in titleNames">{
  {item}}</th>
        </tr>
        <!-- 将books的id属性作为遍历的集合就能得到有几本书，
          这是由于我存储数据的方法而变动的 -->
        <tr v-for="(id,index) in (books.id)">
          <td>{
  {id}}</td>
          <td>{
  {books.name[index]}}</td>
          <td>{
  {books.date[index]}}</td>
          <td>{
  {books.price[index]}}</td>
          <td>
            <!-- 需要设置减的下限，而上限就设置了 -->
            <button @click="del(index)">-</button>
            {
  {books.num[index]}}
            <button @click="add(index)">+</button>
          </td>
          <!-- 移除数据也可以通过只删除id来加以实现了 -->
          <td><button &#