Vue-5-模板和交互

最新推荐文章于 2024-03-31 09:49:46 发布

木木在唱歌

最新推荐文章于 2024-03-31 09:49:46 发布

阅读量152

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/yal23333/article/details/78887784

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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 (value) {
                        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>

木木在唱歌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-5-模板和交互

<!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/v
复制链接

扫一扫