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

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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

红黑树/红黑树迭代器封装（C++）

红黑树/红黑树迭代器封装（C++）

本篇将会较为全面的讲解有关红黑树的特点&#xff0c;插入操作&#xff0c;然后使用代码模拟实现红黑树&#xff0c;同时还会封装出红黑树的迭代器。 在 STL 库中的 set 和 map 都是使用红黑树封装的&#xff0c;在前文中我们讲解了 AVL树&#xff0c;对于红黑树和 AVL 树来说&…
阅读更多...
手机自动化测试：4.通过appium inspector 获取相关app的信息，以某团为例，点击，搜索，获取数据等。

手机自动化测试：4.通过appium inspector 获取相关app的信息，以某团为例，点击，搜索，获取数据等。

0.使用inspector时&#xff0c;一定要把不相关的如weditor啥的退出去&#xff0c;否则&#xff0c;净是事。 1.从0开始的数据获取 第一个位置&#xff0c;有时0.0.0.0&#xff0c;不可以的话&#xff0c;你就用这个。 第二个位置&#xff0c;抄上。 直接点击第三个启动。不要…
阅读更多...
论文阅读：Indoor Scene Layout Estimation from a Single Image

论文阅读：Indoor Scene Layout Estimation from a Single Image

项目地址&#xff1a;https://github.com/leVirve/lsun-room/tree/master 发表时间&#xff1a;2018 icpr 场景理解&#xff0c;在现实交互的众多方面中&#xff0c;因其在增强现实&#xff08;AR&#xff09;等应用中的相关性而得到广泛关注。场景理解可以分为几个子任务&…
阅读更多...
Makefile：从零开始入门Makefile

Makefile：从零开始入门Makefile

目录 1.前言 2.Makefile的简单介绍 3.Makefile中的指令规则 4.Makefile的执行流程 5.Makefile中的变量类型 6.Makefile中的模式匹配 7.Makefile中的函数 8.Makefile补充知识 前言 在Linux中编译CPP文件&#xff0c;我们能够使用GCC命令进行编译&#xff0c;但当项目文件多且繁杂…
阅读更多...
如何利用pandas解析html的表格数据

如何利用pandas解析html的表格数据

如何利用pandas解析html的表格数据 我们在编写爬虫的过程中&#xff0c;经常使用的就是parsel、bs4、pyquery等解析库。在博主的工作中经常的需要解析表格形式的html页面&#xff0c;常规的写法是&#xff0c;解析table表格th作为表头&#xff0c;解析td标签作为表格的行数据 …
阅读更多...
网站不收录的原因

网站不收录的原因

随着互联网的发展&#xff0c;越来越多的网站被创建和更新&#xff0c;然而&#xff0c;并不是所有的网站都能被搜索引擎收录。有时候&#xff0c;这些网站会因为各种原因而被搜索引擎排除在搜索结果之外。下面我们来探讨一下网站不收录的原因。 首先&#xff0c;网站不收录可能…
阅读更多...
贪心算法学习三

贪心算法学习三

例题一 解法&#xff08;贪⼼&#xff09;&#xff1a; 贪⼼策略&#xff1a; ⽤尽可能多的字符去构造回⽂串&#xff1a; a. 如果字符出现偶数个&#xff0c;那么全部都可以⽤来构造回⽂串&#xff1b; b. 如果字符出现奇数个&#xff0c;减去⼀个之后&#xff0c;剩下的…
阅读更多...
12.【Orangepi Zero2】基于orangepi_Zero_2 Linux的智能家居项目

12.【Orangepi Zero2】基于orangepi_Zero_2 Linux的智能家居项目

基于orangPi Zero 2的智能家居项目 需求及项目准备 语音接入控制各类家电&#xff0c;如客厅灯、卧室灯、风扇回顾二阶段的Socket编程&#xff0c;实现Sockect发送指令远程控制各类家电烟雾警报监测&#xff0c; 实时检查是否存在煤气泄漏或者火灾警情&#xff0c;当存在警情时…
阅读更多...
Robust Tiny Object Detection in Aerial Images amidst Label Noise

Robust Tiny Object Detection in Aerial Images amidst Label Noise

文章目录 AbstractIntroductionRelated WorkMethodsClass-aware Label CorrectionUpdateFilteringTrend-guided Learning StrategyTrend-guided Label ReweightingRecurrent Box RegenerationExperimentpaper Abstract 精确检测遥感图像中的小目标非常困难，因为这类目标视觉信…
阅读更多...
关于目前ggrcs包的报错解决方案

关于目前ggrcs包的报错解决方案

目前有不少粉丝私信我说使用ggrcs包出现如下错误 我查看了一下&#xff0c;目前报错来源于新版本后的RMS包&#xff0c;主要是预测函数的报错&#xff0c;这个只能等R包作者来修复这个错误。目前需要急用的话&#xff0c;我提供了一个方案&#xff0c;请看下面视频操作 关于目前…
阅读更多...
外部排序快速入门详解:基本原理，败者树，置换-选择排序，最佳归并树

外部排序快速入门详解:基本原理，败者树，置换-选择排序，最佳归并树

文章目录 外部排序1.最基本的外部排序原理2.外部排序的优化2.1 败者树优化方法2.2 置换-选择排序优化方法2.3 最佳归并树 外部排序 为什么要学习外部排序&#xff1f; 答&#xff1a; 在处理数据的过程中&#xff0c;我们需要把磁盘(外存&#xff09;中存储的数据拿到内存中处理…
阅读更多...
通过 Python+Nacos实现微服务，细解微服务架构

通过 Python+Nacos实现微服务，细解微服务架构

shigen坚持更新文章的博客写手&#xff0c;擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长&#xff0c;分享认知&#xff0c;留住感动。 个人IP&#xff1a;shigen 背景 一直以来的想法比较多&#xff0c;然后就用Python编写各种代码脚本。很多…
阅读更多...
在 Ubuntu 中安装 Docker

在 Ubuntu 中安装 Docker

在 Ubuntu 中安装 Docker 首先&#xff0c;更新你的 Ubuntu 系统。 1、更新 Ubuntu 打开终端&#xff0c;依次运行下列命令&#xff1a; sudo apt update sudo apt upgrade sudo apt full-upgrade 2、添加 Docker 库 首先&#xff0c;安装必要的证书并允许 apt 包管理器…
阅读更多...
AI数据分析：根据Excel表格数据绘制柱形图

AI数据分析：根据Excel表格数据绘制柱形图

工作任务&#xff1a;将Excel文件中2013年至2019年间线上图书的销售额&#xff0c;以条形图的形式呈现&#xff0c;每个条形的高度代表相应年份的销售额&#xff0c;同时在每个条形上方标注具体的销售额数值 在deepseek中输入提示词&#xff1a; 你是一个Python编程专家&#…
阅读更多...
XMind v24.04.1 全功能VIP版（思维升级，效率飞跃）

XMind v24.04.1 全功能VIP版（思维升级，效率飞跃）

软件介绍 XMind 是一款功能丰富的思维导图和创新构思工具&#xff0c;可在多个平台助力高效思考。它涵盖了从灵感触发、结构构建到演示展示的完整思维过程&#xff0c;有效提升创建思维导图的效率。这款工具适用于记录灵感、创新思维、问题解决和效率提升等多元场景&#xff0…
阅读更多...
GEE训练教程——如何确定几何形状的中心点坐标和相交的坐标

GEE训练教程——如何确定几何形状的中心点坐标和相交的坐标

简介 在GEE中&#xff0c;可以使用.geometry()方法来获取几何形状的中心点坐标和相交的坐标。 首先&#xff0c;使用.geometry()方法获取几何形状的几何信息&#xff0c;然后使用.centroid()方法获取几何形状的中心点坐标。示例代码如下&#xff1a; // 获取几何形状的中心点…
阅读更多...
Golang | Leetcode Golang题解之第132题分割回文串II

Golang | Leetcode Golang题解之第132题分割回文串II

题目&#xff1a; 题解&#xff1a; func minCut(s string) int {n : len(s)g : make([][]bool, n)for i : range g {g[i] make([]bool, n)for j : range g[i] {g[i][j] true}}for i : n - 1; i > 0; i-- {for j : i 1; j < n; j {g[i][j] s[i] s[j] && g[…
阅读更多...
【Linux文件篇】系统文件、文件描述符与重定向的实用指南

【Linux文件篇】系统文件、文件描述符与重定向的实用指南

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 前言&#xff1a;相信大家对文件都不会太陌生、也不会太熟悉。在没有学习Linux操作系统时&#xff0c;我们在学习C或C时都学过如何去创建、打开、读写等待文件的操作&#xff0c;知道一些语言级别的一些接口与函数。但…
阅读更多...
【C++题解】1389 - 数据分析

【C++题解】1389 - 数据分析

问题&#xff1a;1389 - 数据分析 类型&#xff1a;简单循环 题目描述&#xff1a; 该方法的操作方式为&#xff0c;如果要传递 2 个数字信息给友军&#xff0c;会直接传递给友军一个整数 n&#xff08;n 是一个 10 位以内的整数&#xff09;&#xff0c;该整数的长度代表要传…
阅读更多...
Python私教张大鹏 Vue3整合AntDesignVue之Breadcrumb 面包屑

Python私教张大鹏 Vue3整合AntDesignVue之Breadcrumb 面包屑

显示当前页面在系统层级结构中的位置&#xff0c;并能向上返回。 何时使用 当系统拥有超过两级以上的层级结构时&#xff1b; 当需要告知用户『你在哪里』时&#xff1b; 当需要向上导航的功能时。 案例&#xff1a;面包屑导航基本使用 核心代码&#xff1a; <template…
阅读更多...
最新文章

Copyright @ 2022~2023