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

  1. 熟悉插值{{}}的用法，在页面中显示下列内容。

图1 插值语法的效果图

  1. 在页面中统计鼠标单机按钮的次数。【提示：v-on指令】，页面效果如下图所示：

图2 统计效果图

3、①单击按钮可以修改黑体字。②通过调试工具vue-devtools修改黑体字。

图3 修改名字和年龄效果图

  1. 文本框输入数据，下面能实时显示对应的欢迎信息。【指令v-model
  • 1.调用vue熟悉插值{{}}的用法

 <script type="text/javascript">

        new Vue({

            el:'#vue1',

            data:{

                myname:'xxx',

                html1:'<b>这些信息是使用b标记的显示效果！</b>',

                x:10,

                yesNo:true                  

            }

        })

    </script>

  • 2.

主要利用v-on函数和vue框架

<button v-on:click="updata">计数</button>

 <script>

        new Vue({

            el:'#app',

            data:{

                sum: 0

            },

            methods:{

                updata:function(){

                    this.sum++;

                }

            }

        })

    </script>

3.

通过vue-devtools调试和v-on实现

       <button v-on:click="update">修改</button>

4.

通过v-model实现

        <form action="" align="center">

            <fieldset>

                <legend align="center">学生信息</legend>

                姓名：<input type="text" v-model:value="name" value="1"><br>

                班级：<input type="text" v-model:value="class1" ><br>

                专业：<input type="text" v-model:value="zy" ><br><br>

                <input type="submit" value="提交">&nbsp;&nbsp;<input type="reset" value="重置"><br><br>

                <p><span>{{zy}}</span>专业、<span>{{class1}}</span>班级的<span>{{name}}</span>同学，欢迎您！</p>

            </fieldset>

        </form>

1.

2

3

4

JavaScript使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交互的表达能力。从而基于CGI静态的HTML、页面将被可提供动态实时信息。

1.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

</head>

<body>

    <div id="vue1">

        <p>1.文本插值：我的姓名是{{myname}}。</p>

        <p>2.使用v-html指令：<span v-html="html1"></span></p>

        <p>3.数值表达式绑定：5+5*3={{5+5*3}}</p>

        <p>4.函数表达式绑定：若x={{x}},则x<sup>2</sup>+5={{Math.pow(x,2)+5}}</p>

        <p>5.条件表达式绑定：若yesNo值为{{yesNo}}，则我的选择是{{yesNo?'确定':'取消'}}。</p>

        <p>6.语句不会生效：var score = 95</p>  

    </div>

    <script type="text/javascript">

        new Vue({

            el:'#vue1',

            data:{

                myname:'xxx',

                html1:'<b>这些信息是使用b标记的显示效果！</b>',

                x:10,

                yesNo:true                  

            }

        })

    </script>

</body>

</html>

2.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        <button v-on:click="updata">计数</button>

        <p>按钮被单击<span>{{sum}}</span>次</p>

    </div>

    <script>

        new Vue({

            el:'#app',

            data:{

                sum: 0

            },

            methods:{

                updata:function(){

                    this.sum++;

                }

            }

        })

    </script>

</body>

</html>

3.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        <p>大家好，我是<span>{{name}}</span></p>

        <p>今年<span>{{age}}</span>岁。</p>

        <button v-on:click="update">修改</button>

    </div>

    <script>

        new Vue({

            el:'#app',

            data:{

                name:"王老师",

                age:'30'

            },

            methods:{

                update:function(){

                    this.name="李老师";

                    this.age="40";

                }

            }

        })

    </script>

</body>

</html>

4.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        <form action="" align="center">

            <fieldset>

                <legend align="center">学生信息</legend>

                姓名：<input type="text" v-model:value="name" value="1"><br>

                班级：<input type="text" v-model:value="class1" ><br>

                专业：<input type="text" v-model:value="zy" ><br><br>

                <input type="submit" value="提交">&nbsp;&nbsp;<input type="reset" value="重置"><br><br>

                <p><span>{{zy}}</span>专业、<span>{{class1}}</span>班级的<span>{{name}}</span>同学，欢迎您！</p>

            </fieldset>

        </form>

    </div>

    <script >

        new Vue({

            el:'#app',

            data:{

                name:'',

                class1:'',

                zy:''

            }

        })

    </script>

</body>

</html>

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

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

相关文章

数据结构：并查集

数据结构：并查集

数据结构&#xff1a;并查集 题目描述参考代码 题目描述 输入样例 5 5 C 1 2 Q1 1 2 Q2 1 C 2 5 Q2 5输出样例 Yes 2 3参考代码 #include <iostream>using namespace std;const int N 100010;int n, m; int p[N], sz[N];int find(int x) // 返回x的祖宗节点 路径…
阅读更多...
AI网络爬虫：用GraphQL查询爬取动态网页数据

AI网络爬虫：用GraphQL查询爬取动态网页数据

任务&#xff1a;爬取网站www.skillshare.com搜索结果页面数据&#xff1a; 查看网站的请求信息&#xff1a; 请求网址: https://www.skillshare.com/api/graphql 请求方法: POST 状态代码: 200 OK 远程地址: 127.0.0.1:10809 引荐来源网址政策: strict-origin-when-…
阅读更多...
Go 群发邮件Redis 实现邮件群发

Go 群发邮件Redis 实现邮件群发

一、安装 go get github.com/go-redis/redis/v8 go get gopkg.in/gomail.v2 二、使用"gopkg.in/gomail.v2"群发 package mainimport (gomail "gopkg.in/gomail.v2" )func main() {// 邮件内容m : gomail.NewMessage()m.SetHeader("From", &qu…
阅读更多...
实验11 OSPF协议配置

实验11 OSPF协议配置

实验11 OSPF协议配置 一、OSPF单区域配置&#xff08;一&#xff09;原理描述&#xff08;二&#xff09;实验目的&#xff08;三&#xff09;实验内容&#xff08;四&#xff09;实验配置&#xff08;五&#xff09;实验步骤 二、OSPF多区域配置&#xff08;一&#xff09;原理…
阅读更多...
44-5 waf绕过 - SQL注入绕WAF方法

44-5 waf绕过 - SQL注入绕WAF方法

环境准备： 43-5 waf绕过 - 安全狗简介及安装-CSDN博客然后安装sqlilabs靶场：构建完善的安全渗透测试环境：推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 一、双写绕过 打开sql靶场的第一关：http://127.0.0.1/sqli-labs-master/Less-1/?id=1 验证一下waf是否开启防…
阅读更多...
创新指南｜2024企业如何开启生成式AI创新?从5大应用场景和6步抓手

创新指南｜2024企业如何开启生成式AI创新?从5大应用场景和6步抓手

想要了解如何采用生成式AI来提高企业效率和竞争力&#xff1f;本指南将介绍如何采用生成式AI来实现数字化转型&#xff0c;并打造智能化商业模式。从5大应用场景和6大步骤切入&#xff0c;让您了解如何开启生成式AI创新。立即连线创新专家咨询或观看创新战略方案视频进一步了解…
阅读更多...
具有可编程电流限制的1.5A电源开关LPW5210用于5V或USB供电输出过流保护只要3毛

具有可编程电流限制的1.5A电源开关LPW5210用于5V或USB供电输出过流保护只要3毛

前言 适合要求反应时间较快的保护电路&#xff0c;保险丝或自恢复保险丝也能起到保护作用&#xff0c;但断开电流是额定电流的一倍&#xff0c;过流较小时&#xff0c;甚至需要数秒或更长的时间才能保护&#xff0c;因此半导体的过流保护开关更合适&#xff0c;相对成本要高一…
阅读更多...
ABC318-E

ABC318-E

挺有意思的一题&#xff0c;就当积累一下吧。 做法 枚举i和k会超时&#xff0c;那就只枚举j。 #include<bits/stdc.h> using namespace std; int n; int a[300010]; vector<int> v[300010]; int main(){ scanf("%d",&n); map<int,int&…
阅读更多...
MQ之初识kafka

MQ之初识kafka

1. MQ简介 1.1 MQ的诞生背景 以前网络上的计算机&#xff08;或者说不同的进程&#xff09;传递数据&#xff0c;通信都是点对点的&#xff0c;而且要实现相同的协议&#xff08;HTTP、 TCP、WebService&#xff09;。1983 年的时候&#xff0c;有个在 MIT 工作的印度小伙突发…
阅读更多...
Android AAudio——C API控制音频流（四）

Android AAudio——C API控制音频流（四）

上一篇文章我们介绍了 C API 中音频流的创建流程，以及打开音频流操作，这里我们再来看一下音频流的其他操作流程 一、音频流操作介绍 1、操作流程图 下图是状态变化流程图，虚线框表示瞬时状态，实线框表示稳定状态。 2、操作函数 上图中主要包含下面几个操作函数： aaudio…
阅读更多...
AI-WEB-1 vulnhub靶场

AI-WEB-1 vulnhub靶场

AI-WEB-1 端口扫描 仅开放80端口 访问80端口 啥也没有 目录扫描 查看robots.txt 发现两个新目录 Disallow: /m3diNf0/ Disallow: /se3reTdir777/uploads/全都无权限访问 加入路径后再次扫描目录 发现/m3diNf0/目录下存在info.php&#xff0c;/se3reTdir777/目录下存在ind…
阅读更多...
大文件上传处理：分卷压缩

大文件上传处理：分卷压缩

大文件上传处理&#xff1a;分卷压缩 大文件上传处理&#xff1a;分卷压缩1、分卷压缩&#xff08;1&#xff09;Bandizip压缩工具&#xff1a;&#xff08;2&#xff09;分卷压缩后&#xff1a; 2、分卷压缩解压3、解压缩工具下载 大文件上传处理&#xff1a;分卷压缩 1、分卷…
阅读更多...
将单列数据帧转换成多列数据帧

将单列数据帧转换成多列数据帧

文章目录 1. 查看数据文件2. 读取数据文件得到单例数据帧3. 将单列数据帧转换成多列数据帧 在本次实战中&#xff0c;我们的目标是将存储在HDFS上的以逗号分隔的文本文件student.txt转换为结构化的Spark DataFrame。首先&#xff0c;使用spark.read.text读取文件&#xff0c;得…
阅读更多...
Python | Leetcode Python题解之第132题分割回文串II

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

题目&#xff1a; 题解&#xff1a; class Solution:def minCut(self, s: str) -> int:n len(s)g [[True] * n for _ in range(n)]for i in range(n - 1, -1, -1):for j in range(i 1, n):g[i][j] (s[i] s[j]) and g[i 1][j - 1]f [float("inf")] * nfor …
阅读更多...
TCP 建链（三次握手）和断链（四次握手）

TCP 建链（三次握手）和断链（四次握手）

TCP 建链&#xff08;三次握手&#xff09;和断链&#xff08;四次挥手&#xff09; 背景简介建链&#xff08;三次握手&#xff09;断链&#xff08;四次挥手&#xff09;序号及标志位延伸问题为什么建立连接需要握手三次&#xff0c;两次行不行&#xff1f;三次握手可以携带数…
阅读更多...
【Vue】Vue生命周期

【Vue】Vue生命周期

Vue生命周期&#xff1a;就是一个Vue实例从创建&#xff08;new一个Vue实例&#xff09; 到 销毁&#xff08;关闭网页&#xff09; 的整个过程。 生命周期四个阶段&#xff1a;① 创建 ② 挂载 ③ 更新 ④ 销毁 创建阶段&#xff1a;创建响应式数据 通过data给当前的Vue实例提…
阅读更多...
【设计模式】结构型-适配器模式

【设计模式】结构型-适配器模式

前言 在软件开发中&#xff0c;经常会遇到需要将一个类的接口转换成另一个类的接口的情况。这可能是因为新旧系统之间的接口不兼容&#xff0c;或者是因为需要使用的第三方库的接口与当前系统的接口不匹配。为了解决这类问题&#xff0c;设计模式中的适配器模式应运而生。 一…
阅读更多...
Leetcode3164. 优质数对的总数 II

Leetcode3164. 优质数对的总数 II

Every day a Leetcode 题目来源&#xff1a;3164. 优质数对的总数 II 解法1&#xff1a;统计因子 遍历 nums1&#xff0c;统计所有元素的因子个数&#xff0c;记录到哈希表 cnt 中。 遍历 nums2&#xff0c;那么有 cnt[nums2[i]*k] 个数可以被 nums2[i]*k 整除&#xff0c;…
阅读更多...
容器化部署Pig微服务快速开发框架

容器化部署Pig微服务快速开发框架

系统说明 基于 Spring Cloud 、Spring Boot、 OAuth2 的 RBAC 企业快速开发平台&#xff0c; 同时支持微服务架构和单体架构 提供对 Spring Authorization Server 生产级实践&#xff0c;支持多种安全授权模式 提供对常见容器化方案支持 Kubernetes、Rancher2 、Kubesphere、E…
阅读更多...
南昌代理记账公司的收费标准及咨询服务

南昌代理记账公司的收费标准及咨询服务

随着现代商业的快速发展&#xff0c;对于财务管理的需求也在不断增加&#xff0c;作为一家专业的会计代理公司&#xff0c;我们的目标是为各类企业提供全面、高效的财务管理服务&#xff0c;任何服务都应以公平合理的价格为基础&#xff0c;我们一直坚持这一原则。 关于常州代…
阅读更多...
最新文章

Copyright @ 2022~2023