创建一个vue的实例页面,页面上显示 vue中data中的数据,data中有 name:【“你的姓名”】,age:【你的年龄】等数据。
时间: 2024-10-11 14:05:13 浏览: 10
在Vue.js中创建一个简单的实例页面,首先你需要确保已经安装了Vue库,并引入到HTML文件中。然后,你可以创建一个`<script>`标签,在其中定义一个Vue组件并设置`data`属性。下面是一个基本示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Data Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script> <!-- 使用最新的Vue版本 -->
</head>
<body>
<div id="app">
<h1>{{ name }}</h1>
<p>Your age is: {{ age }}</p>
</div>
<script>
// Vue实例
new Vue({
el: '#app',
data: {
name: '你的姓名',
age: '你的年龄' // 这里假设你有具体的年龄值
}
});
</script>
</body>
</html>
```
在这个例子中,我们使用了双大括号`{{ }}`作为模板语法,它们会将数据绑定到相应的HTML元素。`name`和`age`在`data`对象中定义,会在页面上动态展示。
阅读全文