侦听属性的综合实训----学生地址信息采集

这个函数可导

于 2023-12-05 15:00:01 发布

阅读量246

点赞数 1

分类专栏：前端工程设计上机实验文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_62573714/article/details/134807039

版权

前端工程设计上机实验专栏收录该内容

6 篇文章 0 订阅

订阅专栏

【实训要求】

（1）学会引入 Vue.js，完成Vue视图中的定义表单。

（2）学会定义Vue实例对象，会配置el和 data等选项。

（3）学会配置methods 和 watch等选项，并完成其中函数的设计。

（4）学会使用v-model、v-bind、v-on 等指令完成表单绑定、属性绑定和事件绑定。

（5）学会使用CSS定义<fieldset>、<input>等标记的样式。

【设计要求】

按如图1所示的页面效果，完成项目实训。

图1 学生信息采集页面

【实训步骤】

（1）建立HTML文件

将项目文件命名为vue-ex-2-1.html。正确引入 Vue.js文件，完成“学生地址信息采集”表单内容的设计，使用 v-model和v-on指令为表单元素绑定表单和事件。为<fieldset>标记绑定class属性，其值为stuClass。

（2）定义Vue 实例，分别完成el、data、methods和watch等选项的配置

定义el，挂载元素为#vue-ex-21。
定义data，分别定义 name、province、city、street、address等初始值（为空)。
定义methods选项。在Vue实例的 methods选项中定义get Address()方法，其功能是将变化的省份、城市、县、区或街道信息重新组合起来，赋值给家庭地址this.address属性。
定义watch选项。在Vue实例对象的watch选项中定义handler()方法，并使用immediate、deep等属性，设置它们的值为true，立即触发视图更新，并深度侦听相关属性值的变化。分别定义province、city、street等属性，将新值赋给相关属性，立即渲染。

（3）信息采集

分别通过表单输入获取省份、城市、县、区或街道等信息，只要其中有一个域的值发生改变，都需要绑定keyup事件，调用getAddress()方法，触发更新“家庭地址”。

（4）定义相关标记的样式

<fieldset>标记中类 fields的样式：宽度550px，高度250px，背景#ADFADA，填充50px，边界(上下为0，左右为自动)。
<input>标记的样式：圆角边框(半径6px)，高度25px，边框(1px、虚线、#44A1FF)。
命令按钮和重置按钮的样式：边界(上下10px、左右自动)，宽度150px，高度35px，背景#44A1FF，颜色为白色，填充(上下为0、左右为20px)。

（5）浏览器查看运行结果

打开浏览器，按F12键进入调试状态。在控制台状态下观察相关属性值的变化。

【代码实现】

1、建立一个html文件，文件名为vue-ex-2-1.html

<!-- vue-ex-2-1.html -->
<html>
<head>
  <meta charset="utf-8">
  <title>学生信息采集</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="vue-ex-21">
    <fieldset class="fields">
      <legend>学生地址信息采集</legend>
      <p>姓名：<input type="text" v-model="name"></p><hr>
      <p>省份：<input type="text" v-model="province" v-on:keyup="getAddress"></p>
      <p>城市：<input type="text" v-model="city" v-on:keyup="getAddress"></p>
      <p>县/区或街道：<input type="text" v-model="street" v-on:keyup="getAddress"></p>
      <p>家庭地址：<input type="text" v-model="address" readonly></p>
      <p><button type="submit">提交</button> <button type="button" v-on:click="resetForm">重置</button></p>
    </fieldset>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#vue-ex-21',
      data: {
        name: '',
        province: '',
        city: '',
        street: '',
        address: ''
      },
      methods: {
        getAddress: function() {
          this.address = this.province + this.city + this.street;
        },
        resetForm: function() {
          this.name = '';
          this.province = '';
          this.city = '';
          this.street = '';
          this.address = '';
        }
      },
      watch: {
        province: {
          handler: function(newVal) {
            this.province = newVal;
            this.getAddress();
          },
          immediate: true,
          deep: true
        },
        city: {
          handler: function(newVal) {
            this.city = newVal;
            this.getAddress();
          },
          immediate: true,
          deep: true
        },
        street: {
          handler: function(newVal) {
            this.street = newVal;
            this.getAddress();
          },
          immediate: true,
          deep: true
        }
      }
    });
  </script>
</body>
</html>

2、建立一个css文件，文件名为style.css

/* style.css */  
.fields {
    width: 550px;
    height: 250px;
    background: #ADFADA;
    padding: 50px;
    margin: 0 auto;
  }
input {
    border-radius: 6px;
    height: 25px;
    border: 1px dashed #44A1FF;
  }
button {
    margin: 10px auto;
    width: 150px;
    height: 35px;
    background: #44A1FF;
    color: white;
    padding: 0 20px;
  }
hr { 
    display: block; height: 1px;
    border: 0; border-top: 1px solid #1633da;
    margin: 1em 0; padding: 0; 
  }

【效果展示】

图2 学生地址信息采集

这个函数可导

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
侦听属性的综合实训----学生地址信息采集

（1）学会引入 Vue.js，完成Vue视图中的定义表单。（2）学会定义Vue实例对象，会配置el和 data等选项。（3）学会配置methods 和 watch等选项，并完成其中函数的设计。（4）学会使用v-model、v-bind、v-on 等指令完成表单绑定、属性绑定和事件绑定。（5）学会使用CSS定义<fieldset>、<input>等标记的样式。按如所示的页面效果，完成项目实训。
复制链接

扫一扫