Un petit exemple de surveillance des données et d'interaction des données en vue-tutoriel HTML-php.cn

Un petit exemple de surveillance des données et d'interaction des données en vue

巴扎黑

Libérer： 2017-07-21 17:21:21

original

1712 Les gens l'ont consulté

Jetons maintenant un coup d'œil à l'événement de surveillance des données $watch in vue,

code js :

 new Vue({
                el:"#div",
                data:{
                   arr:[1,2,3]
                }
            }).$watch("arr",function () {
                alert("数据改变了")
            })

Copier après la connexion

code html :

<div id="div">
<input type="button" value="改变" @click="arr.push(5)">
<h1>{{arr}}</h1>
</div>

Copier après la connexion

C'est le monitoring du tableau. On est pareil pour json, mais il faut lui donner un monitoring approfondi, le troisième paramètre de $watch est {deep: true}.

L'interaction de données dans angulaire inclut $http. Nous avons également une interaction de données pour vue, avec les méthodes post, get et jsonp.

Nous créons ici une simple fonction de recherche Baidu

code css :

 a{
            text-decoration: none;
            color: black;
        }
        #div{
            text-align: center;
            padding-top: 50px;
        }
        input{
            height: 25px;
            width: 500px;
            border-radius: 5px;
            outline: none;
        }
        ul{
            margin-left:470px;
            margin-top: 0;
        }
        li{
            height: 25px;
            text-align: left;
            border:1px solid gray;
            list-style: none;
            width: 500px;
        }

Copier après la connexion

code js :

new Vue({
                el:"#div",
                data:{
                    msg:" ",
                    arr:[]
                },
                methods:{get:function () {this.$http.jsonp('',{
                            wd:this.msg
                        },{
                            jsonp: 'cb'}).then(function(res){this.arr=res.data.s
                        },function(s){
                            console.log(s);
                        });
                    }
                }
            })

Copier après la connexion

Code HTML :

<div id="div">
<input type="text" v-model="msg" @keyup="get()">
<ul>
    <li v-for="item in arr"><a href="javascript:;">{{item}}</a></li>
</ul>
</div>

Copier après la connexion

Un petit étui aussi simple est prêt.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!