A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

watch属性的使用
考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变;(用以前的知识如何实现???)
  • 监听data中属性的改变:
  • [AppleScript] 纯文本查看 复制代码
    <div id="app">
        <input type="text" v-model="firstName"> +
        <input type="text" v-model="lastName"> =
        <span>{{fullName}}</span>
      </div>
    
      <script>
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            firstName: 'jack',
            lastName: 'chen',
            fullName: 'jack - chen'
          },
          methods: {},
          watch: {
            'firstName': function (newVal, oldVal) { // 第一个参数是新数据,第二个参数是旧数据
              this.fullName = newVal + ' - ' + this.lastName;
            },
            'lastName': function (newVal, oldVal) {
              this.fullName = this.firstName + ' - ' + newVal;
            }
          }
        });
      </script>
  • 监听路由对象的改变:
  • [AppleScript] 纯文本查看 复制代码
    <div id="app">
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
    
        <router-view></router-view>
      </div>
    
      <script>
        var login = Vue.extend({
          template: '<h1>登录组件</h1>'
        });
    
        var register = Vue.extend({
          template: '<h1>注册组件</h1>'
        });
    
        var router = new VueRouter({
          routes: [
            { path: "/login", component: login },
            { path: "/register", component: register }
          ]
        });
    
        // 创建 Vue 实例,得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {},
          methods: {},
          router: router,
          watch: {
            '$route': function (newVal, oldVal) {
              if (newVal.path === '/login') {
                console.log('这是登录组件');
              }
            }
          }
        });
      </script>


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马