一、Vue基础——data数据对象（3)

最新推荐文章于 2024-05-10 15:20:59 发布

Sean_me

最新推荐文章于 2024-05-10 15:20:59 发布

阅读量1.7k

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/easy_bird/article/details/118881447

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、Vue中的数据定义在data中，data中可以写复杂类型的数据，渲染复杂类型的数据时，遵循 js 语法即可，比如对象通过 “.” 引出，数组通过索引号。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{ message }}
			<p>{{ person.name }} {{person.phone}}</p>
			<ul>
				<li>{{ place[0]}} </li>
				<li>{{ place[1]}} </li>
				<li>{{ place[2]}} </li>
			</ul>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"你好呀！",
					person:{
						name:"sean",
						phone:"jiancshao@gmail.com"
					},
					place:["丹徒", "润州", "京口"]
				}
			})
		</script>
	</body>
</html>

浏览器效果：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Sean_me

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一、Vue基础——data数据对象（3)

1、Vue中的数据定义在data中，data中可以写复杂类型的数据，渲染复杂类型的数据时，遵循js 语法即可，比如对象通过 “.” 引出，数组通过索引号。示例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> {{ me.
复制链接

扫一扫