Vue 测试实例 - 变量的定义和使用

原创已于 2023-06-08 09:45:55 修改 · 139 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

收录于

于 2023-06-08 09:24:35 首次发布

该文章展示了一个Vue.js的简单应用，通过在HTML中嵌入JavaScript，定义并使用了Vue实例的数据属性如name、site和alexa，以及一个名为details的方法，该方法返回一个结合网站名称的句子。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Vue 测试实例 - 变量的定义和使用</title>
   <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
   <div id="vue_det">

        // {{ }} 用于输出对象属性和函数返回值
       <h1>name : {{name}}</h1>
       <h3>site : {{site}}</h3>
       <h3>url : {{url}}</h3>
       <h3>{{details()}}</h3>
   </div>
   <script type="text/javascript">
       var vm = new Vue({
           el: '#vue_det',
           data: {
               name:"Vue 测试实例 - 变量的定义和使用",
               site: "百度",
               url: "https://www.baidu.com/",
               alexa: "10000"
           },
           methods: {
               details: function() {
                   return this.site + " - 度娘无所不知！";
               }
           }
       })
   </script>
</body>
</html>