使用vue.js数据双向绑定的h5显示{{xxx}}的解决办法

最新推荐文章于 2022-07-01 14:18:49 发布

原创最新推荐文章于 2022-07-01 14:18:49 发布 · 686 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

Html 专栏收录该内容

9 篇文章

订阅专栏

在使用vue.js数据双向绑定时可能会遇见显示{{xxx}}，这是由于绑定失败造成的。原因其实很简单，主要是引用的js顺序不对

。一定要记住、记住、记住（重要提醒说三遍）引用的vue.js要在声明vue的js的前边，声明vue的js要紧挨这body内容，不能放置到前边。


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>xxxxx</title>
    <script src="./vue.js"></script>
    <!--放置在这里或者下面都行，但是要求必须在声明vue的js前边，负责会显示{{}} -->
    <!-- <script src="./javascript/index.js"></script>错误位置，不能在此处，声明vue的js需要放置在紧挨body内容后面，负责会显示{{}} -->
</head>

<body>
    <div id='app'>
        <div class="head-location">
            <p>{{locationMessage}}</p>
        </div>
        <div class="head-location" v-for='item in test'>
            <p>{{item}}</p>
        </div>
    </div>
    <!-- <script src="./javascript/lib/vue.js"></script> OK，放置在此可以-->
    <!-- <script src="./vue.js"></script> -->
    <script src="./javascript/index.js"></script>
    <!--<script src="./vue.js"></script>错误，放置在这里会显示{{}} -->
</body>

</html>

index.js

var vm = new Vue({
    el: "#app",
    data: {
        previewLookImgArr: ["./image/bg_01.png",
            "./image/bg_02.png",
            "./image/bg_03.png",
            "./image/fabu01.png",
            "./image/fahuo01.png",
            "./image/tiajia01.png",
        ],
        test: [23, 33, 344, 4553, 34, 44],
        jingdu: "12651558.14",
        weidu: "4106269.36",
        locationMessage: "正在定位中...",
        historyTrack: []

    },
  }

})