首页<body> <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { site: "菜鸟教程", url: "www.runoob.com", alexa: "10000" }, methods: { details: function() { return this.site + " - 学的不仅是技术，更是梦想！"; } } }) </script> </body>

<body> <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { site: "菜鸟教程", url: "www.runoob.com", alexa: "10000" }, methods: { details: function() { return this.site + " - 学的不仅是技术，更是梦想！"; } } }) </script> </body>

时间: 2023-12-15 16:04:54 浏览: 114

这是一个使用Vue.js的简单网页示例。它包含一个Vue实例，其中有一个数据对象（data），其中包含site、url和alexa三个属性。在HTML代码中，我们使用双花括号语法（{{}}）绑定了这些属性的值。在Vue实例中，我们还定义了一个名为details的方法，该方法返回site属性的值加上一个固定的字符串。在HTML代码中，我们通过调用{{details()}}来显示这个方法的返回值。当页面加载时，Vue会将数据和方法绑定到HTML元素上，并根据定义的规则进行更新和渲染。这样，当数据发生变化时，页面上绑定的内容也会相应地更新。请注意，这只是一个静态示例，如果你需要在实际项目中使用Vue.js，你需要引入Vue.js库，并正确配置和组织你的代码。

阅读全文