您的位置：首页 > 产品设计 > UI/UE

Vue-5-模板和交互

2017-12-24 22:01 253 查看

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>模板和交互</title>
<script src="../js/vue.js"></script>
<script src="../js/vue-resource.js"></script>
</head>
<body>

<div id="box">
<!--双向绑定-->
<input type="text" v-model="msg">
<br>
<!--双向绑定-->
<p>{{msg}}</p>
<!--只绑定一次-->
<p v-once>{{msg}}</p>
<!--转义HTML-->
<p v-html="msg"></p>

<hr>
<!--过滤器-->
{{msg2 | uppercase}}

<hr>
交互
<input type="button" value="获取请求" @click="get()">
<input type="button" value="发送请求" @click="send()">
<input type="button" value="jsonp测试一" @click="jsonpDemo()">
<input type="button" value="jsonp测试二" @click="jsonpBaidu()">

</div>

<div id="box2">
<input type="text" v-model="t1" @keyup="get()">
<ul>
<li v-for="value in myData" >
{{value}}
</li>
</ul>
<p v-show="myData.length==0">暂无数据...</p>
</div>

<script>
window.onload = function () {

//自定义过滤器
Vue.filter('uppercase', function(value) {
if (!value) { return ''}
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1)
});

//模板
new Vue({
el:'#box',
data:{
msg:"你好",
msg2:"aaaaaa"
},
methods:{
//要放到服务器环境
get:function(){
this.$http.get("a.txt").then(function (value) {
alert(value.status + value.data);
},function (reason) {
alert(reason.status);
})
},
send:function(){
this.$http.get("get.php",{
a:1,
b:2
}).then(function (value) {
alert(value.status + value.data);
},function (reason) {
alert(reason.status);
})
},
jsonpDemo:function () {
this.$http.jsonp("https://sug.so.360.cn/suggest",{
word:"a"
}).then(function (v
4000
alue) {
alert(value.status + value.data.s);
},function (reason) {
alert(reason.status);
})
},
jsonpBaidu:function () {
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
wd:'a'
},{
jsonp:'cb'  //callback名字，默认名字就是"callback"
}).then(function (value) {
alert(value.status + value.data.s);
},function (reason) {
alert(reason.status);
})
}
}
});

//    例子
new Vue({
el:'#box2',
data:{
myData:[],
t1:'',
now:-1
},
methods:{
get:function(){
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:this.t1
},{
jsonp:'cb'
}).then(function(res){
this.myData=res.data.s;
},function(){

});
}
}
});

};
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航