HTML、vuejs例子2

最新推荐文章于 2024-09-14 08:09:14 发布

Renaissance&复活

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量233

点赞数

文章标签： html vue.js

本文链接：https://blog.csdn.net/m0_62659797/article/details/126972310

版权

本程序模拟列表的添加及获取列表的数据。

引入 vue.js

提示：

v-bind表示单向数据绑定（缩写为:）
v-model表示双向数据绑定
v-on表示事件（缩写为@）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form</title>

  <!-- 样式表 -->
  <style type="text/css">
    .divStyle {
      width: 300px;
      border: 1px solid #000;
      height: 100px;
      padding: 20px;
    }
  
    .buttons input {
      margin: 5px;
    }
  
    .toRaw {
      position: absolute;
      top: 200px;
      left: 200px;
    }
  </style>

  <!-- 引入vue.js -->
  <script src="./js/vue.js"></script>
</head>
<body>
  <div id="app">
    <div :class="divStyle">
      <!-- 表单 -->
      <form @submit.prevent>
        <label for="id">识别号：</label>
        <input v-model="id" id="id">
        <br />
        <label for="name">姓&nbsp;&nbsp;&nbsp;名：</label>
        <input v-model="name" id="name">

        <!-- 按钮 -->
        <div class="buttons">
          <input type="button" value="添加" @click="add">
          <input type="button" value="清空" @click="clear">
        </div>
      </form>
    </div>


    <!-- 展示列表 -->
    <div>
      <h2>人员列表清单</h2>
      <p v-for="item in users" :key="item.id">
        <input type="checkbox" v-model="checked" :value="item">
        {{item.id}} --- {{item.name}}
      </p>

      <!-- 原始数据 -->
      <pre class="toRaw">{{checked}}</pre>
    </div>
  </div>
  
  <script>
    // 初始化 users 列表
    const users = [
      { 'id': 1, 'name': '张三' },
      { 'id': 2, 'name': '李四' },
      { 'id': 3, 'name': '王五' },
      { 'id': 4, 'name': '赵六' }
    ]
    
    // 创建vue实例
    const vm = new Vue({
        el: '#app',     //根元素（绑定 DOM（文档对象模型） 模板）
        data: {
          id: '', 
          name: '',
          divStyle: 'divStyle',
          checked: [],
          users: users
        },
        methods: {
        // 添加人员
        add() {
          let [id, name] = [this.id, this.name]    //解构赋值
          if (id.trim() && name.trim()) {         //如果输入框不为空，添加值进列表
            this.users.unshift(
              { 'id': id.trim(), 'name': name.trim() }
            )
          }
        },
        // 清空输入框
        clear() {
          this.id = this.name = ''
        }
      },
    })
  </script>
</body>
</html>