<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head> <body> <div id="app"> <p v-text="temp"></p> <div v-html="thtml"></div> <p>{{num1+num2}}</p> <p>{{num1+10}}</p> <p>{{mtemp?888:999}}</p> <p v-show="vs">澳洲生物学家发现新草本植物,薯片味的</p> <p v-if="vif">DIY:五种配方简单的唇膏</p> <p v-else="velse">美军将在武器系统中加入人工智能</p> <div v-for="item in userlist"> <ul> <li>{{item.name}}</li> <li>{{item.age}}</li> <li>{{item.gender}}</li> </ul> </div> <input type="text" v-model="showtemp"> <p>{{showtemp}}</p> <input type="button" value="显示我" v-on:click="showme"> <select v-model="sel"> <option value="111">111</option> <option value="222" selected>222</option> <option value="333">333</option> </select> </div> <script> var vm=new Vue({ el:"#app", data:{ temp:"morgana", showtemp:'', sel:'111', thtml:"<button>heeh<button>", num1:1000, num2:10, mtemp:true, vs:true, vif:true, userlist:[{'name':'hope','age':18,'gender':'girl'}, {'name':'katherine','age':8,'gender':'girl'}, {'name':'morgana','age':28,'gender':'girl'}, ] }, methods:{ showme:function(){ // alert(this.showtemp) alert(this.sel) } } }) setTimeout(function () { vm.temp="hope" },2000) </script> </body> </html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <script src="axios.js"></script> </head> <body> <div id="app"> <input type="button" value="clickme" v-on:click="showme"> <ul> <li v-for="item in items"> {{item.cityCode}} {{item.cityName}} </li> </ul> </div> </body> <script> new Vue({ el:"#app", data:{ items:[] }, methods: { showme: function () { var self = this; var url = 'hotcity.json' axios.get(url, { params: { username: "egon", } }).then(function (response) { self.items = response.data.data.hotCity; }) .catch(function (error) { console.log(error) }) } } }) </script> </html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <script src="axios.js"></script> </head> <body> <div id="app"> username:<input type="text"> password:<input type="password"> <input type="button" value="login" v-on:click="login"> </div> <script> new Vue({ el:"#app", data:{ username:'', password:'' }, methods:{ login:function(){ var url="hotcity.json"; axios.post( url,{username:this.username, password:this.password,}, {"headers":{"Content-Type":"application/x-www-form-urlencodeed"}} ).then(function(response){ console.log(response) }).catch(function (error) { console.log(error) }) } } }) </script> </body> </html>