zoukankan      html  css  js  c++  java
  • vue 使用watch监听实现类似百度搜索功能

    watch监听方法,watch可以监听多个变量,具体使用方法看代码:

    HTML:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue.js 使用watch监听实现类似百度搜索功能  </title>
        <script src="vue.js"></script>
        <script src="node_modules/axios/dist/axios.js"></script>
    </head>
    <body>
    <div id="ask"><!--vue不能控制body和html的标签-->
        <input type="text" v-model="word">
        <h1>{{result}}</h1>
    </div>
    <script>
        var app = new Vue({ //实例化vue
            el:'#ask',//vue控制id为ask的元素,
            //watch 可以监听多个变量
            watch:{
                //监听word变量
                word:function (newV,oldV) {
                    console.log('旧值:'+oldV+'=======>新值:'+newV);
                    //这里可以写异步请求我用的是axios
                    axios.get('Api.php?word='+newV).then(function (res) {
                        console.log(res,'这是异步返回的值');
                        //这里写异步得到值之后的动作
                        app.result=res.data;
                    });
                }
            },
            data:{
                word:'',
                result:''
    
            }
        });
    </script>
    </body>
    </html>
  • 相关阅读:
    中国一些web service收藏
    DataSet 和 List<T> 相互 转换
    JS图表
    IIS DirectoryEntry
    JS弹框
    Remoting
    Del SVN Configuare File BAT
    Viewport3D对象转换成图片
    在WPF中进行碰撞检测
    Button自定义样式
  • 原文地址:https://www.cnblogs.com/tommymarc/p/11627424.html
Copyright © 2011-2022 走看看