当前位置： 首页 > news >正文

html+CSS+js部分基础运用19

news 文章来源：https://blog.csdn.net/m0_55709044/article/details/139568448 2024/11/15 17:56:02

1. 应用动态props传递数据，输出影片的图片、名称和描述等信息【要求使用props】，效果图如下：

2.在页面中定义一个按钮和一行文本，通过单击按钮实现放大文本的功能。【要求使用$emit()】

  

代码可以截图或者复制黏贴放置在“实验步骤及实验结果”中

  • 1. 应用动态props传递数据，输出影片的图片、名称和描述等信息【要求使用props】

<script type="text/javascript">

//注册全局组件

Vue.component('my-movie', {

    //补充完整，传递动态Prop

    props:['img','name','description'],

    template : '<div> \

        <img :src="img"> \

        <div class="movie_name">{{name}}</div> \

        <div class="movie_des">{{description}}</div> \

      </div>'

})

//创建根实例

var vm = new Vue({

    el:'#example',

    data: {

       

            img1: '1.jpg',      

            name: '我是传奇',      

            description: '末世科幻动作电影'

       

    }

})

  • 2. 在页面中定义一个按钮和一行文本，通过单击按钮实现放大文本的功能。

<script>

    var vm = new Vue({

        el: '#app',

        data:{

            postFontSize1:10

        },

        methods: {

            showMsg(data) {

                this.postFontSize1 = data

            }

        },

        components: {

            'childNode': {

                template: '#child',

                data() {

                    return {

                        postFontSize: 10

                    }

                },

                methods: {

                    add() {

                        this.postFontSize++;

                        this.$emit('show', this.postFontSize)  

                    }

                },

            }

        }

    })

</script>

1. 应用动态props传递数据，输出影片的图片、名称和描述等信息

图1

2. 在页面中定义一个按钮和一行文本，通过单击按钮实现放大文本的功能。

图2

1. <html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>输出影片信息</title>

<style>

body{

font-family:微软雅黑}

img{

width:240px;

height:172px;}

.movie_name{padding-left:10px; font-size:18px; color: #333333; margin-top:8px;}

.movie_des{padding-left:10px; font-size:14px; color: #7a7a7a; margin-top:5px;}

</style>

<script src="vue.js"></script>

</head>

<body>

<div id="example">

    <!-- 补充完整 -->

    <my-movie v-bind:img="img1" :name="name" :description="description"></my-movie>

</div>

<script type="text/javascript">

//注册全局组件

Vue.component('my-movie', {

    //补充完整，传递动态Prop

    props:['img','name','description'],

    template : '<div> \

        <img :src="img"> \

        <div class="movie_name">{{name}}</div> \

        <div class="movie_des">{{description}}</div> \

      </div>'

})

//创建根实例

var vm = new Vue({

    el:'#example',

    data: {

       

            img1: '1.jpg',      

            name: '我是传奇',      

            description: '末世科幻动作电影'

       

    }

})

</script>

</body>

</html>



 

2.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>子向父通信</title>

    <script src="vue.js"></script>

</head>

<body>

<div id="app">

    <child-node v-on:show="showMsg"></child-node>

    <div :style="{ fontSize: postFontSize1 + 'px' }">

        我是内容<br>

       

    </div>

   

</div>

<template id="child">

    <div>

        <button @click="add">增加</button><br>

       

    </div>

</template>

<script>

    var vm = new Vue({

        el: '#app',

        data:{

            postFontSize1:10

        },

        methods: {

            showMsg(data) {

                this.postFontSize1 = data

            }

        },

        components: {

            'childNode': {

                template: '#child',

                data() {

                    return {

                        postFontSize: 10

                    }

                },

                methods: {

                    add() {

                        this.postFontSize++;

                        this.$emit('show', this.postFontSize)  

                    }

                },

            }

        }

    })

</script>

</body>

</html>

相关文章：

html+CSS+js部分基础运用19

1. 应用动态props传递数据&#xff0c;输出影片的图片、名称和描述等信息【要求使用props】&#xff0c;效果图如下&#xff1a; 2.在页面中定义一个按钮和一行文本&#xff0c;通过单击按钮实现放大文本的功能。【要求使用$emit()】 代码可以截图或者复制黏贴放置在“实验…...

编程日记 2024/6/10 7:42:21

探索 Debian 常用命令：掌握 Linux 系统管理的重要一步

Debian 作为一个稳定、高效和安全的操作系统，广泛应用于服务器、桌面和嵌入式系统中。对于新手和经验丰富的系统管理员来说，熟练掌握 Debian 的常用命令是管理和维护系统的基础。本文将详细介绍一些在 Debian 系统中经常使用的命令，帮助读者更好地理解和操作这个强大的操作系…...

编程日记 2024/6/10 7:41:19

「C系列」C 作用域规则

文章目录 一、C 作用域规则二、案例1. 块作用域&#xff08;Block Scope&#xff09;2. 文件作用域&#xff08;File Scope&#xff09;3. 静态作用域&#xff08;Static Scope&#xff09;静态局部变量静态全局变量 4. 函数参数的作用域5. 结构体和联合体的作用域 三、相关链接…...

编程日记 2024/6/10 7:40:18

【机器学习基础】Python编程10：五个实用练习题的解析与总结

Python是一种广泛使用的高级编程语言&#xff0c;它在机器学习领域中的重要性主要体现在以下几个方面&#xff1a; 简洁易学&#xff1a;Python语法简洁清晰&#xff0c;易于学习&#xff0c;使得初学者能够快速上手机器学习项目。 丰富的库支持&#xff1a;Python拥有大量的机…...

编程日记 2024/6/10 7:38:16

【设计模式】结构型设计模式之 门面模式

介绍 门面模式&#xff08;Facade Pattern&#xff09;是一种常用的设计模式&#xff0c;属于结构型模式的范畴。它为子系统中的一系列接口提供一个简化的统一接口&#xff0c;即一个外观&#xff08;Facade&#xff09;&#xff0c;从而使子系统更加容易使用。门面模式并不修…...

编程日记 2024/6/10 7:37:15

MAC地址简介

一、MAC和ip地址 很多同学只知道ip地址&#xff0c;同时也知道ip在网络通讯中的重要性&#xff0c;实际上要实现网络通信的话&#xff0c;除了ip地址外还需要MAC地址的配合&#xff0c;只有在这两种地址的配合之下才能完整的实现互联网的通信。但是由于MAC地址的使用&#xff0…...

编程日记 2024/6/10 7:36:12

五种网络IO模型

目录 前言 文件描述符 为什么要多种io模型 同步IO 1.阻塞IO 2.非阻塞IO 3.多路复用IO&#xff08;事件驱动IO&#xff09; select: poll&#xff1a; epoll&#xff1a; 4.信号驱动IO 异步IO 区别 前言 文件描述符 首先我们了解一下文件描述符是什么&#xff1a;…...

编程日记 2024/6/10 7:35:11

VSCode超过390万下载的请求插件

Thunder Client 是一款在 VSCode&#xff08;Visual Studio Code&#xff09;中非常受欢迎的 REST API 客户端插件&#xff0c;由Ranga Vadhineni开发&#xff0c;现在已经有超过390万的下载量。它允许开发者直接在编辑器内发送 HTTP 请求&#xff0c;查看响应。Thunder Client…...

编程日记 2024/6/10 7:33:09

前端 JS 经典：下载的流式传输

触发下载在浏览器中有两种方式&#xff1a;1. 客户端的方式 2. 服务器的方式 1. 服务器的方式 通过 a 元素链接到一个服务器的地址&#xff0c;然后需要后端人员配置&#xff0c;当用户点击按钮请求这个地址时&#xff0c;服务端给他加上一个响应头。Content-Disposition 设置…...

编程日记 2024/6/10 7:30:06

k8s面试题大全，保姆级的攻略哦（三）

目录 1、简述ETCD及其特点? 2、简述ETCD适应的场景? 3、简述什么是Kubernetes? 4、简述Kubernetes和Docker的关系? 5、简述Kubernetes中什么是Minikube、Kubectl、Kubelet? 6、简述Kubernetes常见的部署方式? 7、简述Kubernetes如何实现集群管理? 8、简述Kubern…...

编程日记 2024/6/10 7:29:05

从年金理论到杠杆效应，再到财务报表与投资评估指标

一、解释普通年金终值和普通年金现值的概念。 普通年金终值&#xff1a;以利率为1%&#xff0c;每期收款100元&#xff0c;5期为例&#xff0c;普通年金终值的折算过程如图&#xff1a; 普通年金现值&#xff1a;以利率为1%&#xff0c;每期收款100元&#xff0c;5期为例&am…...

编程日记 2024/6/10 7:28:02

K8S - 用kubectl远程访问内网的k8s集群

在之前的文章 K8S - 在任意node里执行kubectl 命令 介绍过&#xff0c; 通过任何node 的主机&#xff0c; 用kubectl 管理集群是很简单 无非就是两个步骤: 下载 k8s master 上的admin.conf在当前主机配置 K8SCONFIG 环境变量指向 下载的config file 其他内网主机也适用 其…...

编程日记 2024/6/10 7:27:01

STM32F103C8移植uCOSIII并以不同周期点亮两个LED灯（HAL库方式）【uCOS】【STM32开发板】【STM32CubeMX】

STM32F103C8移植uC/OSIII并以不同周期点亮两个LED灯&#xff08;HAL库方式&#xff09;【uC/OS】【STM32开发板】【STM32CubeMX】 实验说明 将嵌入式操作系统uC/OSIII移植到STM32F103C8上&#xff0c;构建两个任务&#xff0c;两个任务分别以1s和3s周期对LED进行点亮—熄灭的…...

编程日记 2024/6/10 7:26:00

【c语言】qsort函数及泛型冒泡排序的模拟实现

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;C语言 目录 一、qsort函数 1.回调函数 2.qsort函数 3.void* 指针 二、泛型冒泡排序的模拟实现 1.比较函数的编写 2.交换函数的编写 3.冒泡排序的编写 4…...

编程日记 2024/6/10 7:24:59

MySQL之多表查询—表子查询

一、引言 上一篇博客学习了行子查询。&#xff08;看弹幕&#xff1a;同一张表用or,不同张表用union&#xff09; 下面接着学习子查询当中的最后一种——表子查询。 表子查询 1、概念 子查询返回的结果是多行多列&#xff0c;这种子查询称为表子查询。 2、常用的操作符 IN 3、…...

编程日记 2024/6/10 7:23:58

Java 18风暴来袭：解锁编程新纪元

一、引言 Java 18的发布标志着Java语言在性能、安全性和开发效率方面的又一次飞跃。本次更新不仅带来了新的语言特性&#xff0c;还包括了一些实验性功能和工具的改进。这些新特性旨在帮助开发者编写更高效、更安全的代码&#xff0c;并提升开发体验。 二、新特性概述 1. 默…...

编程日记 2024/6/10 7:21:56

文件操作(Python和C++版)

一、C版 程序运行时产生的数据都属于临时数据&#xff0c;程序—旦运行结束都会被释放通过文件可以将数据持久化 C中对文件操作需要包含头文件< fstream > 文件类型分为两种: 1. 文本文件 - 文件以文本的ASCII码形式存储在计算机中 2. 二进制文件- 文件以文本的二进…...

编程日记 2024/6/10 7:20:54

Git【版本控制命令】

02 【本地库操作】 1.git的结构 2.Git 远程库——代码托管中心 2.1 git工作流程 代码托管中心用于维护 Git 的远程库。包括在局域网环境下搭建的 GitLab 服务器&#xff0c;以及在外网环境下的 GitHub 和 Gitee (码云)。 一般工作流程如下&#xff1a; 1&#xff0e;从远程…...

编程日记 2024/6/10 7:19:52

打字侠是一款PWA网站，如何下载到电脑桌面？

嘿&#xff0c;亲爱的键盘侠们&#xff01; 你是否还在为寻找一款好用的打字练习工具而烦恼&#xff1f;别担心&#xff0c;今天我要给大家介绍一位超级英雄——打字侠&#xff01;它不仅是一个超级酷的打字练习网站&#xff0c;还是一款PWA&#xff08;渐进式网页应用&#x…...

编程日记 2024/6/10 7:18:51

Scikit-learn使用步骤？使用场景？

Scikit-learn&#xff08;简称sklearn&#xff09;是Python中一个非常流行的机器学习库&#xff0c;它提供了广泛的机器学习算法和工具&#xff0c;用于数据分析、特征工程、模型训练、模型评估等任务。以下是一个关于sklearn的基础教程&#xff0c;内容将按照几个主要部分进行…...

编程日记 2024/6/10 7:17:50

MySQL 5.7详细下载安装配置教程（MySQL 5.7安装包）_mysql5.7的安装教程

记录MySQL 5.7 的下载安装教程&#xff0c;并提供了Mysql 安装包 &#xff0c;以下是详细下载安装过程。 一、下载Mysql安装包 网盘下载&#xff1a; 下载MySQL 5.7安装包&#xff0c;网盘下载地址&#xff1a;点击此处直接下载 官网下载&#xff1a; 进入官网&#xff0c…...

编程日记 2024/6/10 7:16:49

电阻十大品牌供应商

选型时选择热门的电阻品牌&#xff0c;主要是产品丰富&#xff0c;需求基本都能满足。 所所有的电路中&#xff0c;基本没有不用电阻的&#xff0c;电阻的选型需要参考阻值、精度、封装、温度范围&#xff0c;贴片/插件等参数&#xff0c;优秀的供应商如下&#xff1a; 十大电…...

编程日记 2024/6/10 7:12:44

深度学习复盘与论文复现C

文章目录 4、Distributed training4.1 GPU architecture 5、Recurrent neural network5.1 The basic structure of RNN5.2 Neural networks without hidden states5.3 Recurrent neural networks with hidden states5.4 summary 6、Language Model Dataset (lyrics from Jay Ch…...

编程日记 2024/6/10 7:11:42

海洋日特别活动—深海来客——可燃冰

深海中有一种神奇的物质&#xff0c;似冰又不是冰。 别看它其貌不扬&#xff0c;但本领不小&#xff0c;遇火即燃&#xff0c;能量巨大&#xff0c;可谓是能源家族的新宠。它就是被国务院正式批准列为我国第173个矿种的“可燃冰”&#xff01; 可燃冰到底是个啥&#xff1f;它…...

编程日记 2024/6/10 7:10:40

Web前端放图片位置：深入探索与最佳实践

Web前端放图片位置&#xff1a;深入探索与最佳实践 在Web前端开发中&#xff0c;图片作为重要的视觉元素&#xff0c;其放置位置往往影响着网页的整体布局和用户体验。然而&#xff0c;如何合理地放置图片&#xff0c;以最大化其视觉效果并提升用户体验&#xff0c;却是一个颇…...

编程日记 2024/6/10 7:09:39

leetcode-02-[977]有序数组的平方[209]长度最小的子数组[59]螺旋矩阵II

一、[977]有序数组的平方 重点&#xff1a; 新引入一个数组&#xff0c;不要原数组操作 class Solution {public int[] sortedSquares(int[] nums) {int left0,right nums.length-1;int[] resultnew int[nums.length];int index nums.length-1;while(left<right){if(nums…...

编程日记 2024/6/10 7:07:37

Spring Cloud Gateway CORS 跨域方案

通过配置文件&#xff0c;以下配置就是其中一种方案。 gateway: #跨域配置globalcors: cors-configurations: [/**]: allowedMethods: "*"allowedHeaders: "*"allowedOriginPatterns: "*"allowCredentials: truedefault-filters: - DedupeRespo…...

编程日记 2024/6/10 7:06:36

高考后志愿填报信息采集系统制作指南

在高考的硝烟散去之后&#xff0c;每位学生都面临着一个重要的任务——志愿填报。老师们如何高效、准确地收集和整理这些信息&#xff0c;成为了一个棘手的问题。难道我们只能依赖传统的手工登记方式&#xff0c;忍受其繁琐和易错吗&#xff1f; 易查分是一个简单易用的在线工具…...

编程日记 2024/6/10 7:05:35

Python使用Flask构建简单的web应用

构建一个简单的 Flask Web 应用程序是学习 Python Web 开发的良好起点。Flask 是一个轻量级的 WSGI Web 应用框架&#xff0c;它的主要目标是让开发者更容易构建 Web 应用&#xff0c;同时保持简单性和灵活性。下面我们将详细介绍如何使用 Flask 构建一个简单的 Web 应用&#…...

编程日记 2024/6/10 7:04:34

看似不同的事情，却是相同的坑

目录 一、背景二、过程1.遭遇战-微盘股的下杀2.不失为一件好事3.一切向后看吧&#xff0c;最近的学习感受4.该有的心境 三、总结 一、背景 也在一点点改变&#xff0c;期间势必要经历流血的过程&#xff1b;所谓无疯狂不成长&#xff0c;积极的心态去应对&#xff0c;去总结总…...

编程日记 2024/6/10 7:03:33

做代练网站能备案/广西南宁市有公司网站设计

关于AVL树&#xff08;平衡二叉搜索树&#xff0c;高度为lgn&#xff09;的讲解&#xff0c;双手呈上某大佬博客&#xff1a;https://www.cnblogs.com/zhuwbox/p/3636783.html 我从这题get到一个新的结构体写法&#xff08;姿势&#xff09;&#xff1a; typedef struct treeNo…...

编程日记 2024/11/15 15:31:10

蓝色系 网站/seo北京优化

实验环境 第一台centos7源码安装apache2.4.38 IP 192.169.1.13 关闭防火墙 一.rewrite跳转 Rewrite主要的功能就是实现URL的重写。它的正则表达式是基于Perl语言&#xff0c;入站的规则用于修改 HTTP 请求 Url。这些规则可以为以下几个目的&#xff0c;如演示对用户更加友好…...

编程日记 2024/11/15 11:46:54

网站公众号信息化建设工作计划/成都seo优化排名公司

随着各种设备达到所谓的“视网膜显示”水平&#xff0c;高分辨率显示器正变得越来越普遍。 您的网站和应用需要在这些屏幕分辨率上看起来不错&#xff0c;因此这里有一些可以帮助您的插件。 1. retina.js 一个开源脚本 &#xff0c;可以轻松地将高分辨率图像提供给具有视网膜显…...

编程日记 2024/11/15 11:30:37

新1站网站建设/百度网站收录提交

Git是一款注重速度、数据完整性、分布式支持和非线性工作流的分布式版本控制工具。Git最初由Linus Torvalds在2005年为Linux内核开发而设计&#xff0c;如今已经成为被广泛接受的版本控制系统。和其他大多数分布式版本控制系统比起来&#xff0c;不像大多数客户端-服务端的系统…...

编程日记 2024/11/15 8:04:10

公司网站建设调研问卷/经典的软文广告

数据库基本操作语句有哪些&#xff1f;数据库基本操作语句有&#xff1a;1 关于数据库的基本操作SHOW DATABASES; //查询数据库SHOWCREATE DATABASE score; //查询数据库的结构CREATEDATABASE score DEFAULT CHARSET utf8; //创建数据库USE score; //使用score数据库DROP DATAB…...

编程日记 2024/11/15 7:54:04

wordpress icp备案在哪个文件中/石家庄疫情最新情况

2019年的7-8月&#xff0c;中国消费者协会组织开展了一项住宅小区物业服务调查体验活动&#xff0c;随机选取了全国36个城市的148个住宅小区进行调查。从调查数据来看&#xff0c;消费者对住宅小区物业服务的综合满意度较低&#xff0c;得分仅有62.59分&#xff0c;刚过及格线。…...

编程日记 2024/11/15 1:43:36