<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>