vue 简单实验 自定义组件 传参数 props

1.代码

<script src="https://unpkg.com/vue@next" rel="external nofollow" ></script>
<div id="todo-list-app"><todo-item v-bind:todo="todo1"></todo-item>
</div>
<script>
const ListRendering = {data() {return {todo1:'传递参数'}}
}
// 创建一个Vue 应用
const app = Vue.createApp(ListRendering)// 定义一个名为 todo-item 的新全局组件
app.component('todo-item', {props: ['todo'],template: `<p>{{ todo}}</p>`
})app.mount('#todo-list-app')
</script>

2.运行结果

 3.备注

注:这里<todo-item v-bind:todo="todo1"></todo-item>的"todo1"必须是来自组件的变量名,如果想直接赋值是不行的。

 

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

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

相关文章

Linux虚拟机安装(Ubuntu 20)

最近这段时间使用VMWare安装了一下Ubuntu版本的Linux虚拟机&#xff0c;在这里记录一下安装时参考的文章以及需要注意的细节 参考链接&#xff1a; VMware虚拟机下安装Ubuntu20.04&#xff08;保姆级教程&#xff09; 一、安装VMWare 下载链接&#xff1a;VMware Workstatio…

Maven解析

目录 Maven的概念 Pom 项目坐标 仓库 Maven环境搭建 安装jdk 配置maven 配置本地仓库地址 配置阿里云 maven 镜像仓库&#xff0c;下载速度更快 在idea中配置maven ​编辑 pom中名词解释 Maven命令 Maven的概念 Maven 是 Apache 软件基金会的一个开源项目,是一个…

从头开始:将新项目上传至Git仓库的简易指南

无论您是一个经验丰富的开发者还是一个刚刚起步的新手&#xff0c;使用Git来管理您的项目是一个明智的选择。Git是一个强大的版本控制系统&#xff0c;它可以帮助您跟踪项目的变化、合并代码以及与团队成员协作。在本文中&#xff0c;我们将为您提供一步步的指南&#xff0c;教…

RTSP/Onvif视频服务器EasyNVR安防视频云服务平台出现崩溃并重启的情况解决方案

EasyNVR安防视频云服务平台的特点是基于RTSP/Onvif协议将前端设备统一接入&#xff0c;在平台进行转码、直播、处理及分发&#xff0c;在安防监控场景中&#xff0c;EasyNVR可实现实时监控、云端录像、云存储、告警、级联等视频能力&#xff0c;极大满足行业的视频监控需求。 有…

【AI】即使AI 时代,程序员也无需焦虑

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;目前学习C/C、算法、Python、Java等方向&#xff0c;一个正在慢慢前行的普通人。 &#x1f3c0;系列专栏&#xff1a;陈童学的日记 &#x1f4a1;其他专栏&#xff1a;CSTL&…

数组分割(2023省蓝桥杯)n种讨论 JAVA

目录 1、题目描述&#xff1a;2、前言&#xff1a;3、动态规划&#xff08;bug)&#xff1a;3、递归 剪枝&#xff08;超时&#xff09;&#xff1a;4、数学&#xff08;正解&#xff09;&#xff1a; 1、题目描述&#xff1a; 小蓝有一个长度为 N 的数组 A [A0, A1,…, AN−…

c++ qt--页面布局(第五部分)

c qt–页面布局&#xff08;第五部分&#xff09; 一.页面布局 在设计页面的左侧一栏的组件中我们可以看到进行页面布局的一些组件 布局组件的使用 1.水平布局 使用&#xff1a;将别的组件拖到水平布局的组件中即可&#xff0c;可以选择是在哪个位置 2.垂直布局 使用&…

敏捷研发管理软件及敏捷管理流程

Scrum中非常强调公开、透明、直接有效的沟通&#xff0c;这也是“可视化的管理工具”在敏捷开发中如此重要的原因之一。通过“可视化的管理工具”让所有人直观的看到需求&#xff0c;故事&#xff0c;任务之间的流转状态&#xff0c;可以使团队成员更加快速适应敏捷开发流程。 …

RK3588平台开发系列讲解(AI 篇)RKNN-Toolkit2 模型的加载

文章目录 一、Caffe模型加载接口二、TensorFlow模型加载接口三、TensorFlowLite模型加载接口四、ONNX模型加载五、ONNX模型加载六、PyTorch模型加载接口沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 RKNN-Toolkit2 目前支持 Caffe、TensorFlow、TensorFlowLite、ONN…

互联网医院成品功能你有哪些看法?

随着信息化的飞速发展&#xff0c;医疗领域信息化程度日益加深&#xff0c;医院对于信息化的自身需求越来越高&#xff0c;由此也推动了医院信息化的快速发展。而即时医疗信息服务能够解决普通老百姓医疗信息匮乏、花大钱看小病、就医不及时等基本问题。通过智能手机、平板电脑…

C++信息学奥赛1130:找第一个只出现一次的字符

这段代码的功能是找出输入字符串中第一个重复出现的字符&#xff0c;并输出该字符。 解析注释后的代码如下&#xff1a; #include<bits/stdc.h> using namespace std; int main() {string arr;getline(cin, arr); int a0;for(int i0;i<arr.length();i){for(int j0;j…

lvs-dr模式+keepalived

一&#xff0c;keepalived概述 Keepalived 是一个基于VRRP协议来实现的LVS服务高可用方案&#xff0c;可以解决静态路由出现的单点故障问题。 在一个LVS服务集群中通常有主服务器&#xff08;MASTER&#xff09;和备份服务器&#xff08;BACKUP&#xff09;两种角色的服务器&am…

枚举和反射

枚举 枚举 枚举是一种特殊的类&#xff0c;它可以有自己的属性、方法和构造方法。 两种枚举的方法 自定义枚举 a.将构造器私有化&#xff0c;防止外部直接new b.去掉set方法&#xff0c;防止属性被修改 c.在内部直接创建固定的对象 通过类名直接去访问 关键字枚举 用…

聊聊敏捷实践的“个体与交互”

这是鼎叔的第七十二篇原创文章。行业大牛和刚毕业的小白&#xff0c;都可以进来聊聊。 欢迎关注本公众号《敏捷测试转型》&#xff0c;星标收藏&#xff0c;大量原创思考文章陆续推出。 敏捷宣言有重要的一句话&#xff1a;个体和交互胜过过程和工具。作为工程师&#xff0c;…

Pycharm通过SSH配置centos上Spark环境

直接在shell进行pyspark进行编程&#xff0c;程序没有办法写得太长&#xff0c;而且我们希望能够实现一个及时给出结果的编程环境&#xff0c;可以使用pycharm连接centos上的spark&#xff0c;进行本地编程&#xff0c;同步到centos系统中运行程序&#xff0c;并把结果返回pych…

Spring Boot 整合MyBatis-Plus

&#x1f600;前言 本篇博文是关于Spring Boot 整合MyBatis-Plus的&#xff0c;希望你能够喜欢&#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的…

构建 NodeJS 影院预订微服务并使用 docker 部署(03/4)

一、说明 构建一个微服务的电影网站&#xff0c;需要Docker、NodeJS、MongoDB&#xff0c;这样的案例您见过吗&#xff1f;如果对此有兴趣&#xff0c;您就继续往下看吧。 你好社区&#xff0c;这是&#x1f3f0;“构建 NodeJS 影院微服务”系列的第三篇文章。本系列文章演示了…

Qt应用开发(基础篇)——纯文本编辑窗口 QPlainTextEdit

一、前言 QPlainTextEdit类继承于QAbstractScrollArea&#xff0c;QAbstractScrollArea继承于QFrame&#xff0c;是Qt用来显示和编辑纯文本的窗口。 滚屏区域基类https://blog.csdn.net/u014491932/article/details/132245486?spm1001.2014.3001.5501框架类QFramehttps://blo…

怎么把PDF转成Word?需要注意什么事项?

PDF是一种常见的文档格式&#xff0c;但是与Word文档不同&#xff0c;PDF文件通常不能直接编辑。如果您想编辑PDF文件中的文本&#xff0c;或者想将PDF文件转换为Word文档&#xff0c;下面我们就来看一看把PDF转成Word有哪些方法和注意事项。 PDF转Word工具 有许多将PDF转换为…

自动化测试之Junit

Junit引入注解参数化单参数多参数方法传参 测试用例执行顺序断言测试套件 Junit引入 Junit来编写和组织自动化测试用例&#xff0c;使用Selenium来实际模拟用户与Web应用程序的交互。也就是使用JUnit的测试功能来管理和运行Selenium测试。常见的做法是&#xff0c;使用JUnit作…