Vue系列——数据对象

news2024/11/26 5:32:45

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el:挂载点</title>
</head>
<body>
    <div id="app">
        {{message}}
        <h2>{{school.name}} {{school.age}}</h2>
        <ul>
            <li>{{campus[0]}}</li>
            <li>{{campus[1]}}</li>
            <li>{{campus[2]}}</li>
            <li>{{campus[3]}}</li>
        </ul>

    </div>

    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app=new Vue({
            el:"#app", 
            data:{
                message:"你好,小黑",
                school:{
                    name:"黑马程序员",
                    mobile:"400-618-9090"
                },
                campus:["北京校区","上海校区","广州校区","深圳校区"]

            }
        })
    </script>
</body>
</html>

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

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

相关文章

本地项目上传到GitHub

本文档因使用实际项目提交做为案例&#xff0c;故使用xxx等字符进行脱敏&#xff0c;同时隐藏了部分输出&#xff0c;已实际项目和命令行输出为准 0、 Git 安装与GitHub注册 1&#xff09; 在下述地址下载Git&#xff0c;安装一路默认下一步即可。安装完成后&#xff0c;随便…

【面试经典150 | 动态规划】零钱兑换

文章目录 Tag题目来源解题思路方法一&#xff1a;动态规划 写在最后 Tag 【动态规划】【数组】 题目来源 322. 零钱兑换 解题思路 方法一&#xff1a;动态规划 定义状态 dp[i] 表示凑成总金额的最少硬币个数。 状态转移 从小到大枚举要凑成的金额 i&#xff0c;如果当前…

电动车“锂”改“铅”屡被查?新国标或疏于考虑用户真实需求

最近几个月&#xff0c;电动自行车又走到了舆论中心。 “315期间”&#xff0c;不少媒体集中报道了超标电动自行车改装上牌事件。3月18日至20日&#xff0c;新华社推出电动自行车安全隐患系列调查&#xff0c;聚焦点之一就是改装超标问题。而在近段时间&#xff0c;综合媒体报…

MarTech调研总结整理

整体介绍 概念解释&#xff1a; Martech是一种智慧营销的概念&#xff0c;将割裂的营销&#xff08;Marketing&#xff09;、技术&#xff08;Technology&#xff09;与管理&#xff08;Management&#xff09;联系在一起&#xff0c;Martech将技术溶于全营销流程中&#xff0…

基于Java实验室预约管理系统设计与实现(源码+部署文档)

博主介绍&#xff1a; ✌至今服务客户已经1000、专注于Java技术领域、项目定制、技术答疑、开发工具、毕业项目实战 ✌ &#x1f345; 文末获取源码联系 &#x1f345; &#x1f447;&#x1f3fb; 精彩专栏 推荐订阅 &#x1f447;&#x1f3fb; 不然下次找不到 Java项目精品实…

《操作系统导论》第14章读书笔记:插叙:内存操作API

《操作系统导论》第14章读书笔记&#xff1a;插叙&#xff1a;内存操作API —— 杭州 2024-03-30 夜 文章目录 《操作系统导论》第14章读书笔记&#xff1a;插叙&#xff1a;内存操作API1.内存类型1.1.栈内存&#xff1a;它的申请和释放操作是编译器来隐式管理的&#xff0c;所…

FebHost:意大利.IT域名一张意大利网络名片

.IT域名是意大利的国家顶级域名&#xff0c;对于意大利企业和个人而言,拥有一个属于自己的”.IT”域名无疑是件令人自豪的事。这个被誉为意大利互联网标志性代表的域名,不仅隐含着浓厚的意大利文化特色,还为使用者在当地市场的推广铺平了道路。 对于那些希望在意大利市场建立强…

2核4G服务器可以承载多少用户?卡不卡?

腾讯云轻量应用服务器2核4G5M配置性能测评&#xff0c;腾讯云轻量2核4G5M带宽服务器支持多少人在线访问&#xff1f;并发数10&#xff0c;支持每天5000IP人数访问&#xff0c;腾讯云百科txybk.com整理2核4G服务器支持多少人同时在线&#xff1f;并发数测试、CPU性能、内存性能、…

手把手在K210上部署自己在线训练的YOLO模型

小白花了两天时间学习了一下K210&#xff0c;将在线训练的模型部署在K210&#xff08;代码后面给出&#xff09;上&#xff0c;能够识别卡皮巴拉水杯&#xff08;没错&#xff0c;卡皮巴拉&#xff0c;情绪稳定&#xff0c;真的可爱&#xff01;&#xff09;。数据集是用K210拍…

C语言例1-11:语句 while(!a); 中的表达式 !a 可以替换为

A. a!1 B. a!0 C. a0 D. a1 答案&#xff1a;C while()成真才执行&#xff0c;所以!a1 &#xff0c;也就是 a0 原代码如下&#xff1a; #include<stdio.h> int main(void) {int a0;while(!a){a;printf("a\n");} return 0; } 结果如…

数字化转型导师坚鹏:新质生产力发展解读、方法与案例

新质生产力发展解读、方法与案例 课程背景&#xff1a; 很多学员存在以下问题&#xff1a; 不知道如何理解新质生产力&#xff1f; 不清楚如何发展新质生产力&#xff1f; 不知道新质生产力发展案例&#xff1f; 课程特色&#xff1a; 有实战案例 有原创观点 有…

Linux课程____selinux模式

一、是什么 它叫做“安全增强型 Linux&#xff08;Security-Enhanced Linux&#xff09;”&#xff0c;简称 SELinux&#xff0c;它是 Linux 的一个安全子系统 二、有啥用 就是最大限度地减小系统中服务进程可访问的资源&#xff08;根据的是最小权限原则&#xff09;。避免…

leetcode:392. 判断子序列

题目&#xff1a; class Solution { public:bool isSubsequence(string s, string t) {} }; 题解&#xff1a; 很巧妙的题解&#xff1a;循环遍历两个字符串&#xff0c;两个字符串都没遍完就继续遍历&#xff0c;字符串s先遍历完结果为true&#xff0c;字符串t先遍历完结果为…

2024第17届计算机设计大赛开始啦(保研竞赛)

中国大学生计算机设计大赛是面向高校本科生的竞赛&#xff0c;旨在培养创新型、复合型、应用型人才。2024年大赛的主题包括软件应用、微课与教学辅助等11个大类。参赛队由1&#xff5e;3名本科生组成&#xff0c;指导教师不多于2人。在组队和选题方面&#xff0c;强调团结协作和…

Linux学习记录18——用户的基本组、扩展组和文件的所有者、所属组之间的关系

一.学习的内容 经过前两次的学习&#xff0c;我对文件的所有者和所属组的概念不是很清晰。即什么才是文件的所有者&#xff1f;什么才是文件的所属组&#xff1f;它俩和用户的基本组、扩展组有联系吗&#xff1f;文件的所有者、所属组和其他用户都对文件有相应的rwx权限&#x…

双端队列的插入与删除操作的实现及其时间复杂度分析

双端队列(deque,全称为double-ended queue)是一种支持在两端插入和删除元素的数据结构。与栈和队列不同,双端队列提供了更加灵活的操作方式。在实现双端队列时,我们可以采用数组作为底层数据结构,以保证插入和删除操作的时间复杂度为O(1)。 一、双端队列的基本概念 双…

Vue3 + Vite + TS + Element-Plus + Pinia创建新项目(1)

1、cmd进入命令行后&#xff0c;输入npm create vite 2、使用vs code打开文件夹 3、在VS Code的终端里面输入命令&#xff1a;npm i 安装依赖 4、安装依赖库 npm i vue-router 路由安装 npm i pinia 全局状态管理 npm i axios 请求库 npm i element-p…

Matlab之提高交叉定位点的定位精度

通过测向交叉定位的方法&#xff0c;按理只需2根测向线即可得出定位点的位置。但由于误差的存在&#xff0c;求出的定位点位置存在一定的偏差。为了得到更加精确的定位点位置&#xff0c;需要对定位点进行冗余测量&#xff0c;从而得到多个定位点&#xff0c;然后通过定位点估计…

ssm007亚盛汽车配件销售业绩管理统+jsp

亚盛汽车配件销售业绩管理系统设计与实现 摘 要 如今的信息时代&#xff0c;对信息的共享性&#xff0c;信息的流通性有着较高要求&#xff0c;因此传统管理方式就不适合。为了让亚盛汽车配件销售信息的管理模式进行升级&#xff0c;也为了更好的维护亚盛汽车配件销售信息&am…

【Linux系统】信号量实现同步和互斥

一.回顾 在这之前已经讲解了System V版本的信号量&#xff0c;主要内容为以下3点&#xff1a; 信号量本质是一把计数器申请信号量本质就是预订资源PV操作(申请和释放)是原子的 今天我们要学习的是POSIX版本的信号量&#xff0c;以上三点同样遵循 二.信号量VS互斥锁 1.联系&…