用vue做一个动态可添加列表效果

代码仓库

代码已上传至gitee仓库，其中也有其它的样式代码，具体请点击地址

创建一个html文件并引入vue

如下代码所示，如何引入，为什么要这么写看注释

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!--cdn引入vue.js即可，需要网络环境-->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <!--id是必要的，用于装载-->
  <div id="app">
    <!--一个表单，用与添加item-->
    <form>
      <!--item的名称-->
      <input type="text" v-model="item.name" placeholder="item name"/>
      <!--item的数量-->
      <input type="number" v-model="item.count"/>
      <!--按钮，用于触发事件-->
      <button type="button" v-on:click="addItem(item)">add</button>
    </form>
    <!--显示items-->
    <ul>
      <li v-for="item in items">
        {{ item.name }} : {{ item.count }}
      </li>
    </ul> 
  </div>
</body>

<script>
  const App = {
    data() {
      return {
        item: {
          name: '',
          count: 0
        },
        items: []
      }
    },
    methods: {
      // 这里的item存在引用关系，所以建议使用新对象的方式添加
      addItem(item) {
        this.items.push({
          name: item.name,
          count: item.count
        })
      }
    }
  }
  // 新版本的语法
  Vue.createApp(App).mount('#app')
</script>

</html>

结果展示

直接打开此html文件，一开始如下图所示
随便输入点信息，然后点击add按钮，如下图所示
继续添加
以上就是一个简单的，仅仅可以添加的动态列表效果

[JavaScript知识库]用vue做一个动态可添加列表效果

用vue做一个动态可添加列表效果

代码仓库

创建一个html文件并引入vue

结果展示

更多（持续更新中，以后会写在本文章里）