vue--监听属性完成大小写字母间的转换

监听属性 watch
侦听属性的作用是侦听某属性值的变化，从而做相应的操作，侦听属性是一个对象，它的键是要监听的对象或者变量，值一般是函数,当你侦听的元素发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。

     <script type="text/javascript">

        window.onload = function(){

            var app = new Vue({

                el:"#app",

                data:{

                upp:0,

                low:0

            },

            watch:{

                upp:function(val){

                this.upp = val;

                this.low = val.toLowerCase();

            },

                low:function(val){     

                this.low = val;

                this.upp = val.toUpperCase();

            }

          }

         });

     

        }

     

       </script>

 

vue代码至此就全都写完了，下面要html出场啦！

   <div id="app">

                大写：<input type="text" v-model = "upp" />

               

                小写：<input type="text" v-model = "low"/>

   </div>

 

 

运行效果图：