模板语句——02

模板语句的数据来源

1.谁可以给模板语句提供数据支持? data选项

2.data选项的类型是什么? Object | Function (对象或者函数)

3.data配置项的专业叫法:vue 实例的数据对象。(data实际上是给整个)vue实例提供数据的来源

4.对象必须是纯粹的对象(含有零个或多个的Keyvalue 对)

5.data数据如何插入到模板语句当中?

{{}}这是vue框架自己给自己搞的一套语法,别的框架看不懂,浏览器也是不能够识别的

vue框架是自己是能够看得懂。这种语法在vue中被称为:模板语法中的插值语法(有的人叫胡子语法)

怎么用?

{{ datade 的 key}}

插值语法的小细节:

{这里不能有其他字符包括空格{}这里不能有其他的字符包括空格}


程序:

<body>

<div id='app'></div> //指定挂载的位置

//vue 程序

<script>

new vue ({

template:'<h1>最近非常火爆的电视剧{{name}},它的上映日期是{{releaseTime}}

主角是{{lead.name}},年龄是{{lead.age}}岁。其他演员包括 {{ actors[0].name}}{{actores[0].age}},{{ actors[1].name}}{{actores[2].age}}。 {{a.b.c.d.name}}

</h1>`,// {这里不能有其他字符包括空格{}这里不能有其他的字符包括空格}

data : {

name:'美美11'

releaseTime:'2024/3/27',

lead:{

name : '甜甜',

age : 18

},

actors : [

{

name : '安心'

age : ' 30 '

},

{

name : '高启强'

age : ' 30 '

}

],

a : {

b : {

c : {

d : {

name : '好美丽'

}

}

}

}

}

}).$mount('#app')

</script>

</body>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/867217.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2 极/2 零 (2P2Z) 补偿器

极/2 零 &#xff08;2P2Z&#xff09; 补偿器是模拟 II 型控制器的数字实现。它是一种滤波器&#xff0c;通过考虑两个极点和一个零点&#xff0c;将特定的增益和相位升压引入系统。您必须战略性地选择每个极点和零点的频率位置&#xff0c;这将有助于实现所需的系统性能。在该…

团队编程:提升代码质量与知识共享的利器

目录 前言1. 什么是团队编程&#xff1f;1.1 团队编程的起源1.2 团队编程的工作流程 2. 团队编程的优势2.1 提高代码质量2.2 促进知识共享2.3 增强团队协作2.4 提高开发效率 3. 团队编程的挑战3.1 开发成本较高3.2 需要良好的团队协作3.3 个人风格和习惯的差异3.4 长时间的集中…

[C++][CMake][生成可执行文件][下]详细讲解

目录 1.搜索文件1.aux_source_directory2.file 2.包含头文件3.变量操作1.追加1.使用set拼接2.使用list拼接 2.字符串移除3.list其他操作 4.宏定义5.预定义宏 1.搜索文件 如果一个项目里边的源文件很多&#xff0c;在编写CMakeLists.txt文件的时候不可能将项目目录的各个文件一…

大数据期末复习——hadoop、hive等基础知识

一、题型分析 1、Hadoop环境搭建 2、hadoop的三大组件 HDFS&#xff1a;NameNode&#xff0c;DataNode&#xff0c;SecondaryNameNode YARN&#xff1a;ResourceManager&#xff0c;NodeManager &#xff08;Yarn的工作原理&#xff09; MapReduce&#xff1a;Map&#xff0…

七人互助拼团模式:共创共赢的电商新篇章

在当今电商行业的繁荣浪潮中&#xff0c;七人互助拼团模式犹如一股清流&#xff0c;凭借其独特的激励机制与深厚的互助合作文化&#xff0c;赢得了消费者与商家的广泛赞誉。这一模式不仅重新定义了团购体验&#xff0c;更在无形中强化了社群间的联系与协作&#xff0c;共同绘制…

学懂C#编程:属性(Property)的概念定义及使用详解

在C#中&#xff0c;属性&#xff08;Property&#xff09;是一种特殊的类成员&#xff0c;它提供了一种灵活的机制来读取、写入或计算私有字段的值。属性使得类的字段可以像公共数据成员一样被访问&#xff0c;同时还可以在访问时执行自定义的逻辑&#xff0c;如数据验证、计算…

解决loguru在multiprocessing并发场景下子线程日志无法记录到文件问题

logger对象在创建时必须从父进程传递给子进程才能记录日志&#xff0c;有两种传递方式&#xff1a; 第一种&#xff1a;通过类定义一个日志变量&#xff0c;然后外部传入logger对象来记录日志。 # workers_a.py class Worker:_logger Nonestaticmethoddef set_logger(logger…

中英双语介绍日本东京(Tokyo)

中文版 东京介绍 东京是日本的首都&#xff0c;也是日本的政治、经济、文化和国际交流中心。以下是对东京的详细介绍&#xff0c;包括其地理位置、人口、经济、教育、文化和主要景点。 地理位置 东京位于日本关东地区的南部&#xff0c;地理坐标大致为北纬35度41分&#xf…

C语言_练习题

求最小公倍数 思路&#xff1a;假设两个数&#xff0c;5和7&#xff0c;那么最小至少也要7吧&#xff0c;所以先假定最小公倍数是两个数之间较大的&#xff0c;然后看7能不能同时整除5和7&#xff0c;不能就加1继续除 int GetLCM(int _num1, int _num2) {int max _num1>_n…

C++11中新特性介绍-之(二)

11.自动类型推导 (1) auto类型自动推导 auto自动推导变量的类型 auto并不代表某个实际的类型&#xff0c;只是一个类型声明的占位符 auto并不是万能的在任意场景下都能推导&#xff0c;使用auto声明的变量必须进行初始化&#xff0c;以让编译器推导出它的实际类型&#xff0c;…

直接交付和间接交付

路由器在IP数据包的传输过程中&#xff0c;根据源主机与目的主机是否位于同一物理网络&#xff0c;会采用直接交付或间接交付两种方式。以下是对这两种交付方式的清晰归纳&#xff1a; 一、直接交付 定义&#xff1a; 直接交付发生在源主机与目的主机位于同一个物理网络时&a…

Laravel语言之桥:本地化与国际化的实现艺术

标题&#xff1a;Laravel语言之桥&#xff1a;本地化与国际化的实现艺术 Laravel框架提供了一套强大的国际化&#xff08;Internationalization&#xff0c;简称I18n&#xff09;和本地化&#xff08;Localization&#xff0c;简称L10n&#xff09;支持&#xff0c;使得开发者…

Python入门 2024/7/6

目录 数据容器入门 列表的定义语法 基本语法 嵌套列表 ​编辑 列表的下表索引 ​编辑 列表的常用操作 列表的常见方法 查找元素的下标 修改下标索引的值 插入元素 追加元素 追加一批元素 删除元素 删除某元素在列表中的第一个匹配项 清空列表内容 统计元素在…

深入理解 CSS 选择器:全面指南

简述&#xff1a;CSS&#xff08;层叠样式表&#xff09;选择器是网页设计和开发中至关重要的工具。它们用于选择 HTML 元素并应用样式&#xff0c;使得网页变得美观和具有交互性。这里来记录一下&#xff0c;各种 CSS 选择器及其使用方法。 一. Css各种选择器的权重 !importa…

Ansible主机清单

华子目录 管理Ansible静态清单1.定义主机清单2.两种方式定义主机清单3.使用静态主机清单指定受管主机&#xff08;默认&#xff09;3.1产生原因3.2静态主机清单文件本质3.3清单内容分析&#xff08;不分组&#xff09;3.4清单内容分析&#xff08;分组&#xff09;3.5通过范围简…

void *指针与其他类型指针间赋值

#include<stdio.h> int main() {int a;int *p = &a;void *z = p;char *c = z; }上面的代码编译并不一定会有报错和告警信息,但有些是需要注意的。 分析: int a;:定义了一个整型变量a。 int *p = &a;:定义了一个指向整型变量的指针p,指向变量a的地址。 void…

2024亚太杯中文赛数学建模B题完整论文讲解(含每一问python代码+结果+可视化图)

大家好呀&#xff0c;从发布赛题一直到现在&#xff0c;总算完成了2024 年第十四届 APMCM 亚太地区大学生数学建模竞赛B题洪水灾害的数据分析与预测完整的成品论文。 本论文可以保证原创&#xff0c;保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人…

web服务之Nginx

web服务之Nginx &#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:Li…

将IConfiguration对象转换成一个具体的对象,以面向对象的方式来使用配置

我们倾向于将IConfiguration对象转换成一个具体的对象&#xff0c;以面向对象的方式来使用配置&#xff0c;我们将这个转换过程称为配置绑定。除了将配置树叶子节点配置节的绑定为某种标量对象外&#xff0c;我们还可以直接将一个配置节绑定为一个具有对应结构的符合对象。除此…

电脑截图的快捷键

以下是几种电脑截图的快捷键&#xff1a; Windowsshifts&#xff1a;矩形截图、任意形状截图、全屏截图&#xff08;需要安装office2010以后的版本&#xff0c;有onenote这附件&#xff09;1CtrlAltR&#xff1a;页面区域截屏CtrlAltV&#xff1a;可视页面截屏CtrlAltH&#x…