我在index.html中有javascript变量。例如 :

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
    <meta charset="utf-8">
    <script>
        var testVariable = '111';
    </script>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>frontend</title>
    </head>
    <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    </body>
    </html>


我计划在组件vue文件中使用testVariable。可能吗。这是我的helloworld.vue文件:

    <template >
    <div xmlns:th="http://www.thymeleaf.org" class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
      <br>
      <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
     <span th:text="'Hello, ' + ${message}"></span>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
    </div>
    </template>
    <script>
    export default {
    name: 'HelloWorld',
    data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
    },
    };
     </script>

    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>


我想使用模型变量从spring boot到vuejs。需要发送此变量以用于进一步的axios标注。

最佳答案

由于您的testVariable是全局的,因此您可以在vue组件中的任何位置访问它。但我建议您在数据中引用它:

export default {
  data() {
    return {
      myVariable: testVariable
    };
  },
};

07-24 09:44
查看更多