vue系列6:名称案例

1、使用keyup事件实现

<body>
  <div id="app">

    <!-- 分析: -->
    <!-- 1. 我们要监听到 文本框数据的改变,这样才能知道 什么时候去拼接 出一个 fullname -->
    <!-- 2. 如何监听到 文本框的数据改变呢??? -->

    <input type="text" v-model="firstname" @keyup="getFullname"> +
    <input type="text" v-model="lastname" @keyup="getFullname"> =
    <input type="text" v-model="fullname">

  </div>

  <script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        firstname: '',
        lastname: '',
        fullname: ''
      },
      methods: {
        getFullname() {
          this.fullname = this.firstname + '-' + this.lastname
        }
      }
    });
  </script>
</body>

猜你喜欢

转载自www.cnblogs.com/xidianzxm/p/12189063.html