vue学习11-监听属性 

<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='UTF-8'>
 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 <script src='https://unpkg.com/vue/dist/vue.js'></script>
 <title></title>
</head>
<body>
 <div id='app'>
   <div>
     <input type="text" v-model:value="keyword">
   </div>
   <div>
    <span>推荐的关键字：</span>
    {{result}}
   </div>

 </div>
 <script>
    new Vue({
     el:'#app',
     data:{
      keyword:"",
      result:"",
     },
     watch:{
       keyword(newValue,oldValue){
        this.result='正在加载中.....'
        setTimeout(() =>{
          this.result = "推荐的结果："+newValue
        },1000);

       }
     }
   }
)
</script>
</body>
</html>

　　

posted @ 2021-12-28 15:25  空谷近心  阅读(18)  评论(0)    收藏  举报