Vue简明实用教程(02)——Vue的data属性详解
我们可在Vue的data属性中定义基本数据类型(字符串、整数等)、数组、对象、对象数组。
·
版权声明
- 本文原创作者：谷哥的小弟
- 作者博客地址：http://blog.csdn.net/lfdfhl
data属性概述
我们可在Vue的data属性中定义基本数据类型(字符串、整数等)、数组、对象、对象数组。
data属性示例
在Vue的data属性定义以下类型的数据：
- 1、字符串
- 2、整数
- 3、数组
- 4、对象
- 5、对象数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<!-- 引入vue -->
<script src="js/vue.js"></script>
<script type="text/javascript">
// 入口函数
window.onload = function () {
new Vue({
el: "#div1",
data: {
// 定义字符串
name: "谷哥的小弟",
// 定义整数
number:9527,
// 定义数组
hobby:["篮球","足球","击剑"],
// 定义对象
user:{id: 21, name: "zxx", age: 50},
// 定义对象数组
users:[
{id: 21, name: "zxx", age: 50},
{id: 22, name: "zxc", age: 51},
{id: 23, name: "zcc", age: 52},
]
}
});
}
</script>
</head>
<body>
<h2 style="color: red;">本文作者：谷哥的小弟</h2>
<h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
<div id="div1">
<!-- 获取字符串 -->
<h3>{{name}}</h3>
<!-- 获取整数 -->
<h3>{{number}}</h3>
<h3>{{number+1}}</h3>
<!-- 获取数组中的元素-->
<h3>{{hobby[0]}}</h3>
<h3>{{hobby[1].length}}</h3>
<h3>{{hobby[2]=="击剑"}}</h3>
<!-- 获取对象 -->
<h3>{{user}}</h3>
<h3>{{user.id}}</h3>
<h3>{{user.name}}</h3>
<h3>{{user.age}}</h3>
<!-- 获取对象数组中的对象-->
<h3>{{users[1].id}}</h3>
<h3>{{users[1].name}}</h3>
<h3>{{users[1].age}}</h3>
</div>
</body>
</html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
4
0- 0
已为社区贡献6条内容
所有评论(0)