<三>computed 和事件的绑定

1、计算属性computed和methods 的区别在于computed 优先使用缓存，methods实时更新，如果message变更，其他两个值也会变更。

 <body>
      <div id="app">
        <p>原始字符串: {{ message }}</p>
        <p>计算后反转字符串: {{ reversedMessage1() }}</p>
        <p>计算后反转字符串: {{ reversedMessage }}</p>
        
      </div>
    <script src="vue.js"></script>
    <script>
      var app = new Vue({
                          el: '#app',
                          data: {
                            message: 'Runoob!'
                          },
                          computed: {                        
                            reversedMessage: function () {                                               
                              return this.message.split('').reverse().join('');
                            }
                          },
                          methods:{
                            reversedMessage1: function () {                            
                              return this.message.split('').reverse().join('');
                            }
                          }
                    })
    </script>

2、上面的例子是反转字段/方法依赖message,所以message一变更，其他两个也会变更。那如果反过来呢，那就要用到setter了。

 <body>
      <div id="app">      
          <div>{{ hello }}</div> 
          <div>{{ vu }}</div> 
      </div>
    <script src="vue.js"></script>
    <script>
      var app = new Vue({
                          el: '#app',
                          data: {
                            hello: '',
                            vu:''
                          },
                          computed: {                        
                            fullUrl:{
                              get: function () {                                               
                                return this.hello+' '+this.vu;
                              },
                              set:function(newvalue){
                                var str = newvalue.split(' ');
                                this.hello = str[0];
                                this.vu = str[str.length - 1]
                              }                                                     
                          }     
                        }                   
                    });
      app.fullUrl='hello vue';
    </script>

3、v-on事件绑定

    <body>
      <div id="app">      
        <button v-on:click="showname('vue')">{{name}} {{time}}</button>
      </div>
    <script src="vue.js"></script>
    <script>
      var app = new Vue({
                          el: '#app',
                          data: {
                            name: '',
                            time:0
                          },
                          methods: {                        
                           showname:function(message){
                               this.name=message;
                               this.time=this.time+1;
                           }
                        }                   
                    });
   </script>

按键修饰符   v-on:keyup.13  捕捉keycode为13的按键，vue提供了一些常用的按键别名

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

.enter  
.tab    
.delete 
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

 

posted @ 2021-12-11 18:46  许轩霖  阅读(105)  评论(0)    收藏  举报