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

最新推荐文章于 2025-06-09 21:01:36 发布
原创 最新推荐文章于 2025-06-09 21:01:36 发布 · 1.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

这篇博客展示了如何在Vue中定义和使用复杂类型的数据。通过一个简单的HTML页面，作者演示了如何在data对象中声明字符串、对象和数组，并在模板中使用点号操作符和索引来渲染这些数据。示例包括显示消息、个人信息和地点列表。
部署运行你感兴趣的模型镜像

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>

浏览器效果：

 

您可能感兴趣的与本文相关的镜像

ComfyUI

ComfyUI

AI应用
ComfyUI

ComfyUI是一款易于上手的工作流设计工具，具有以下特点：基于工作流节点设计，可视化工作流搭建，快速切换工作流，对显存占用小，速度快，支持多种插件，如ADetailer、Controlnet和AnimateDIFF等

SpringBoot+Vue使用——数据删除与数据恢复
weixin_42067873的博客
03-14 1082
注：建立数据表时，加入了active字段，表示用户状态（删除、未删除）。删除并不实际删除数据，只是修改对应的状态值。 vue数据插槽介绍： Vue - slot-scope="scope" 的意义： slot-scope="scope"来取得作用域插槽中 :data绑定的数据，scope可以随便替换其他名称，只是定义对象来代表取得的data数据，便于使用 <el-table-column prop="active" label="用户状态"> <!-- 数据插槽，用...
Vue | 05.Vue基础 - data数据对象
xyx-Eshang的博客
09-27 1422
文章目录1.概述2.实践 1.概述 Vue中用到的数据定义在data中 data中可以写复杂类型的数据，如对象、数组等 2.实践 在js中定义Vue对象，并在data数据对象中定义几个复杂数据类型的数据： <script type="text/javascript"> new Vue({ el: "#app", data: { message: "hello world", person: {
Vue学习之data数据对象详解
Code皮皮虾的博客
09-12 3884
文章目录1、data详解2、总结 1、data详解 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello Vue</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> &lt
Vue 实例的数据对象详解
weixin_51288065的博客
06-09 910
在 Vue 中，数据对象是响应式系统的核心，也是组件状态的载体。理解数据对象的原理和使用方式是成为 Vue 专家的关键一步。我将从多个维度深入剖析 Vue 实例的数据对象。
Vue之数据对象
玉案轩窗的博客
07-20 3774
前言 本篇文章旨在学习Vue对于相关属性或特性的处理，同时学习HTML特性和DOM属性的区别和联系，实际上涉及到以下内容： HTML特性和DOM属性之间的联系与区别 Vue的数据对象中涉及的HTML特性、DOM属性、组件prop、特殊特性 Vue中对于4种属性或特性处理所涉及的相关逻辑 HTML特性和DOM属性 实际上对于HTML特性和DOM属性，之前对于其的理解是相同的东西，实际上它们是不同...
Vue-data定义对象，数组，其他数据类型
热门推荐
文文x的博客
12-11 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-del属性的用法</title> </head> <body> <div id="app"> {{ msg+','+username }} <h1> 学生1姓名:{{ userlist[0].name }
vue面试——2021最全面的vue基础面试题.pdf
12-14
本资源提供了Vue基础知识点的面试题，涵盖了Vue的基本原理、双向数据绑定的原理、MVVM、MVC、MVP等软件架构设计模式的区别等知识点。 1. Vue的基本原理 Vue实例创建时，Vue会遍历data中的属性，使用Object....
vue基础——数据共享
m0_61631823的博客
01-16 496
组件间的数据共享方式较为常用的有父子关系，以及兄弟关系 ①父组件向子组件传输数据：需要属于自定义属性 首先在子组件中通过props定义一个自定义的属性，然后在父组件中引用，如下面代码： //父组件 <Son :msg="message" :user="userinfo"></Son> data(){ return { message: 'hello vue.js', userinfo:{ name:'zs',age:20} }
Vue3——组件基础
wxid_856d59fjl8ea22的博客
04-20 705
Vue3 组件基础 组件的定义与使用，局部组件与全局组件，父组件与子组件，父组件传值给子组件，事件发射：子组件传值给父组件
【Vue知识点】——Vue2和Vue3的数据劫持
m0_50785976的博客
10-21 2311
Vue2的Object.defineProperty和Vue3的Proxy实现数据劫持
Vue实例中的数据对象
i前端小学生的博客
05-11 1233
1、数据对象 当一个Vue实例被创建时，它将data对象中的所有属性加入到Vue的响应式系统中。当这个属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。 代码示例： // 声明数据对象 var data = { msg: "hello" } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ data: data }) 上面代码中，可以将我们声明的对象赋值到Vue实例中，使用vm.msg == data.msg比较时，结果为tru...
vue 变量定义 对象_ABAP学习笔记基础语法02数据对象的定义变量与常量（01）
weixin_39629617的博客
12-11 341
导读每天学习一点ABAP知识。本篇我们简单介绍一下数据对象中，变量和常量的定义方式。注意：本篇只是简单分享了常用语法结构，具体其他技术细节，请大家自行测试。正文变量的定义常见定义变量的方式有两种：DATA和 LIKE.DATA是通过数据类型去定义变量；LIKE是通过数据对象去定义变量。1.DATA+TYPE用数据类型去定义变量；1.1. 语法结构DATA varname (length)...
Vue.js：组件的数据data存放
ikunsdc 的博客
02-28 2575
组件是一个单独功能模块的封装：既可以有属于自己的HTML模板，也可以有属性自己的数据data和方法methods。 组件中不能直接访问Vue实例中的data 一丶组件的数据存放 Vue组件有自己保存数据的地方： 组件对象中声明一个data属性 这个data属性必须是一个函数 而且这个函数的返回一个对象，对象内部保存着数据 组件data必须是函数 如果我们的data不是一个函数，函数不返回一个对象 不同复用处的组件的数据，都会随着一处的更改而全部都改，就没有独立性。 如果组件data..
vue中为什么data属性在实例中可以定义成对象，而在组件中定义成对象会抛出错误
Sherry Tian的博客
10-18 1129
vue中为什么data属性在实例中可以定义成对象，而在组件中定义成对象会抛出错误
Vue中为什么data属性是一个函数而不是一个对象？（看完就会了）
常来常往，共同成长
12-22 778
根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况。组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象。
[乐意黎原创] Vue中data定义的三种方式和区别
打杂人
03-06 1万+
在 Vue中，定义data时，经常有好几种写法，一不小心会混淆，这里彻底详述一下，以便记分清 。 一、在vue中，定义data可以有三种写法。 1. 第一种写法，对象。 var app = new Vue({ 　　el: '#app', 　　data: { 　　　　mess: 'aerchi' 　　} }) 2. 第二种写法，data 是一个 函数。 var app = new V...
Vue框架中data(数据对象)的特点
qq_66104156的博客
07-11 216
Vue框架中data(数据对象)的特点：1、Vue中用到的数据定义在data中 2、data中可以写复杂类型的数据 3、渲染复杂类型数据时，遵守js的语法
Vue基础 el挂载点、data数据对象
小楼一夜听春雨，深巷明朝卖杏花
06-29 721
vue是如何知道要去操作那个元素的呢？el:"#app"这里有el的属性，在css当中#是id选择器。这样就可以让vue去管理id为app的元素。第一步导入vue，第二步在html里面写一点东西，第三步在js里面写一点东西。{{message}} 是模板的语法，作用是使用数据和页面结构关联起来。data是vue实例当中的使用到的数据，你需要使用什么就写什么。
【Vue】Vue中操作对【数组和对象】操作示例大全（图文+完整代码）
【敦厚的曹操】的专栏
02-24 9234
一、【filter】按指定条件筛选、过滤数组与对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc
vue案例——ToDoList
最新发布
10-28
Vue实现ToDoList案例包含多个关键步骤，以下为详细介绍： ### 项目入口配置 在`main.js`文件中进行Vue的入口配置，引入Vue和App组件，同时关闭生产提示。示例代码如下： ```javascript import Vue from &#39;vue&#39; import App from &#39;./App.vue&#39; Vue.config.productionTip = false new Vue({ el: &#39;#app&#39;, render: h => h(App) }) ``` 该代码实现了Vue实例的创建并挂载到`#app`元素上，为整个项目的运行提供了基础环境[^4]。 ### 组件化编码 - **实现静态组件**：需进行组件拆分，定义各个组件名称后分别引入和注册。例如App组件，Item组件作为List的子组件需单独引入和注册。可以直接引入模块化的html和css，通过自行拆分来引入组件，从而完成静态组件的定义，呈现静态页面效果[^3]。 - **展示动态数据**：当MyList中有待处理事项时，使用数组对象存储，每个对象包含id号、内容title和是否完成的状态done。渲染时使用`v-for`指令，如`v-for = " todoObj in todos"`，并绑定`:key="todoObj.id"`保证列表渲染的高效性。实际也可写成`v-for = "(title, index) in todos"` [^3]。 ### 功能实现 - **添加功能**：创建静态页面后，在确定按钮上使用`v-on`添加事件功能，写在`methods`中。在`input`按钮使用`v-model`进行双向数据绑定以获取数据，同时在`data`中写入`input`初始值。数据获取成功后，使用`push`方法将其追加到新建数组中，使值在对应的`input`中显示出来 [^2]。在`vue`的`methods`中添加`add`方法获取用户输入数据，有两种方式，一种是`add(e){e.target.value}`，另一种是在`input`中用`v-model`双向绑定数据`title`，在`Vue`的`data()`中返回`title: &#39;&#39;`，`this.title`即为输入数据 [^5]。 - **删除功能**：添加删除按钮并绑定删除事件，也可直接在要删除的绑定事件标签上添加删除事件。删除功能依据下标（index）进行，所以要获取参数，将`index`添加到`li`中获取当前`index`，使用`splice`方法进行删除 [^2]。 - **选框功能**：完善静态页面，添加`input`标签，`type="checktext"`。选框功能需获取相应的`index`和选框状态`status`，添加未选中按钮并绑定选中事件，将`list`数组改写。在事件中获取`index`对应的`item`，改变其`status`，按钮使用三目运算根据`status`判断是否选中 [^2]。 - **清除所有已完成的待办事项**：在`App.vue`中添加`clearAllTodo`方法，使用`filter`方法过滤掉已完成（`done`为`true`）的待办事项，更新`todos`数组 [^1]。示例代码如下： ```javascript clearAllTodo() { this.todos = this.todos.filter((todo) => { return !todo.done }) } ``` ### 总结 通过上述步骤，可使用Vue实现一个完整的ToDoList案例，包括组件化开发、动态数据展示以及添加、删除、选框和清除已完成事项等功能 [^1][^2][^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值