初学Vue----案例二

最新推荐文章于 2023-11-06 14:36:18 发布

清·梦

最新推荐文章于 2023-11-06 14:36:18 发布

阅读量160

点赞数

文章标签： vue js

梦丶亦碎

本文链接：https://blog.csdn.net/qq_43959546/article/details/106873871

版权

案例一：随机笑话

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="每日一笑" @click="getjoke">
    <p>{{joke}}</p>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            joke: ""
        },
        methods: {
            getjoke: function () {
                var that = this;
                axios.get("https://autumnfish.cn/api/joke").then(function (value) {
                    that.joke = value.data;
                }, function (reason) {

                })
            }
        }
    })
</script>
</body>
</html>

运行结果：
在这里插入图片描述
案例二：查询天气

<!DOCTYPE html>
<html lang="en" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .search {
            width: 30%;
            margin: 10px auto;
            display: flex;
        }

        .search input {
            float: left;
            flex: 4;
            height: 30px;
            outline: none;
            border: 1px solid red;
            box-sizing: border-box;
            padding-left: 10px;
        }

        .search button {
            float: right;
            flex: 1;
            height: 30px;
            background-color: red;
            color: white;
            border-style: none;
            outline: none;
        }

        .search button i {
            font-style: normal;
        }

        .search button:hover {
            font-size: 16px;
            cursor: pointer;
        }
        #cc {
            margin: 0 auto;
            width: 100px;
        }
    </style>
</head>
<body>
<div id="app2">
    <div id="cc"><h2 style="font-family: 华文新魏">城市天气</h2></div>
    <div class="search">
        <input type="text" placeholder="请输入..." name="" id="" value="" @keyup.enter="searchWeather" v-model="city"/>
        <button @click="searchWeather"><i>搜索</i></button>
    </div>
    <ul style="width: 2000px;margin-left: 200px">
        <li v-for="item in weatherList" style="list-style: none;float: left;margin-left: 50px;">
            <p style="font-size: larger">&#12288;&#12288;&nbsp;{{item.type}}</p>
            <b style="font-size: smaller">{{item.low}}</b>~<b style="font-size: smaller">{{item.high}}</b>
            <p>&#12288;&nbsp;{{item.date}}</p>
        </li>
    </ul>
</div>
<script>
    new Vue({
        el:"#app2",
        data:{
          city:"",
          weatherList:[]
        },
        methods:{
            searchWeather:function () {
                var that = this;
                axios.get("https://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function (response) {
                        console.log(response.data.data.forecast);
                    that.weatherList = response.data.data.forecast;
                }).catch(function (reason) {

                })
            }
        }
    })
</script>
</body>
</html>

运行结果：
在这里插入图片描述

如果没有效果，换个浏览器即可

清·梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学Vue----案例二

案例一：随机笑话<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script></head><body><div id="app"> <input type="b
复制链接

扫一扫