HTML、vuejs例子1

最新推荐文章于 2024-03-21 21:54:00 发布

Renaissance&复活

最新推荐文章于 2024-03-21 21:54:00 发布

阅读量343

点赞数

文章标签： vue.js 前端 javascript

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

版权

本程序模拟学生地址信息采集，当填写省份、城市、街道时自动将数据转换为地址。

引入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>Student Address</title>

  <!-- 样式 -->
  <style type="text/css">
    .fields {
      width: 550px;
      height: 250px;
      background-color: #adfada;
      padding: 50px;
      margin: 0 auto;
    }
  
    .fields > input {
      border-radius: 6px;
      height: 25px;
      border: 1px dashed #44a1ff;
      width: 16em;
    }
  
    .fields label {
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
    }
  
    .fields > input ~ input {
      margin-top: 5px;
  
    }
  
    .buttons input {
      margin: 10px 5px;
      width: 150px;
      height: 35px;
      background-color: #44a1ff;
      color: #fff;
      padding: 0 20px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }
  </style>

  <!-- 导入vue.js -->
  <script src="./js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 表单 -->
    <form @submit.prevent>
      <fieldset :class="stuClass">
        <legend style="text-align: center;">学生地址信息采集</legend>

        <label for="name">姓名：</label>
        <input v-model.trim="name" id="name">
        <hr size="2px" color="#44a1ff" />
        <label for="province">省份：</label>
        <input v-model.trim="province" id="province" @keyup="getAddress"><br />
        <label for="city">城市：</label>
        <input v-model.trim="city" id="city" @keyup="getAddress"><br />
        <label for="street">县、区或街道：</label>
        <input v-model.trim="street" id="street" @keyup="getAddress"><br />
        <label for="address">地址：</label>
        <input v-model.trim="address" id="address" style="width: 80%;">

        <!-- 按钮 -->
        <div class="buttons">
          <input type="submit" value="提交">
          <input type="reset" value="重置">
        </div>
      </fieldset>
    </form>
  </div>
  
  <script>
    // 创建Vue实例
    const vm = new Vue({
      el: '#app', //根元素（绑定到 DOM（文档对象模型） 模板）
      data: {     //状态（存储响应式数据）
        stuClass: 'fields', //样式
        name: '',           //姓名
        province: '',       //省份
        city: '',           //城市
        street: '',         //街道
        address: ''         //地址
      },
      methods: {  //存储方法
        // 获取地址
        getAddress() {
          let [province, city, street] = [this.province, this.city, this.street]  //通过解构赋值给局部变量
          this.address = `${province} ${city} ${street}` //地址赋值
          // this.address = `${this.province} ${this.city} ${this.street}`        //直接赋值
        }
      }
    })
  </script>
</body>
</html>