分享一个vue里面关于防止模板跑出来的小技巧_vue 如何避免模版显示-优快云博客

本文链接：https://blog.youkuaiyun.com/String_name_TT/article/details/108698339

在Vue中，如果不加display=none，模板代码（如{{city}}）会在页面刷新时显示。通过添加display=none并结合v-show指令，可以避免模板在刷新时意外出现。该方法无需额外资源或接口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分享一个vue里面关于防止模板跑出来的小技巧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="city"><input type="button" value="查询" @click="findWeather(city)"><br>
    <a href="#" @click="changeCity('北京')">北京</a>  <a href="#" @click="changeCity('重庆')">重庆</a>
    <a href="#" @click="changeCity('深圳')">深圳</a>  <a href="#" @click="changeCity('广州')">广州</a>
    <hr>

    <b v-show="wearther!=''" style="display: none">{{city}},今天的天气是:{{wearther.type}},最{{wearther.high}},最{{wearther.low}}</b>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            city: '重庆',
            wearther: ''
        },
        methods: {
            changeCity:function (city) {
                this.city = city;
                this.findWeather(city)
            },
            findWeather: function (city) {
                axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+city)
                    .then(response=>this.wearther=response.data.data.forecast[0])
                    .catch(err=>console.log(err))
            }
        }
    })
</script>
</body>
</html>

哎，不会用markdown，直接说吧，上面那段代码如果不在css里面加上display=none，会出现每次刷新的时候，模板代码(就是那个{{city}}类似的东西出现)，但是我们加了display=none配合v-show指令，他就不会在刷新的时候出现了。
页面你们就脑部，或者直接复制代码就可以试试，我这个没外部资源，接口也是官方的。
主要不会用markdown