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>

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

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

相关文章

uni-app：利用Vue的原型对象Vue.prototype设置全局方法及其引用

uni-app：利用Vue的原型对象Vue.prototype设置全局方法及其引用

一、在main.js中设置方法checkPermission绑定到Vue.prototype 核心代码 Vue.prototype.$checkPermission function(username) {console.log(Checking permission for:, username); }; 完整代码 import App from ./App// 添加 checkPermission 方法到 Vue.prototype 上,检查…
阅读更多...
服务器数据恢复—服务器raid5上层zfs文件系统数据恢复案例

服务器数据恢复—服务器raid5上层zfs文件系统数据恢复案例

服务器数据恢复环境&故障&#xff1a; 一台某品牌X3650M3服务器&#xff0c;服务器中有一组raid5磁盘阵列&#xff0c;上层采用zfs文件系统。 服务器未知原因崩溃&#xff0c;工作人员排查故障后发现服务器的raid5阵列中有两块硬盘离线导致该阵列不可用&#xff0c;服务器内…
阅读更多...
Vue3-toRaw 与 markRaw

Vue3-toRaw 与 markRaw

toRaw 作用&#xff1a;用于获取一个响应式对象的原始对象&#xff0c; toRaw 返回的对象不再是响应式的&#xff0c;不会触发视图更新。 官网描述&#xff1a;这是一个可以用于临时读取而不引起代理访问/跟踪开销&#xff0c;或是写入而不触发更改的特殊方法。不建议保存对原始…
阅读更多...
Web3.0区块链技术开发方案丨ICO与IDO代币开发

Web3.0区块链技术开发方案丨ICO与IDO代币开发

在Web3.0时代的到来下&#xff0c;区块链技术不仅改变着金融领域的格局&#xff0c;也在资金筹集和代币发行方面掀起了一场变革。初始代币发行&#xff08;ICO&#xff09;和去中心化代币发行&#xff08;IDO&#xff09;成为了项目融资的主要方式&#xff0c;其基于区块链技术…
阅读更多...
电脑开机之后要很久才能进入系统？进入WinPE也是卡顿半天？

电脑开机之后要很久才能进入系统？进入WinPE也是卡顿半天？

前言 小白最近接到了一张很奇怪的电脑维修单&#xff0c;客户说他的工作室电脑开机特别慢&#xff0c;开机之后特别卡顿&#xff0c;在使用的时候也会一卡一卡的。 这事情开始看很简单&#xff1a;估计就是电脑还是机械硬盘&#xff0c;所以开机很慢又卡顿。所以应该是把机械…
阅读更多...
reset database to incarnation rman 恢复最早的全备方法

reset database to incarnation rman 恢复最早的全备方法

核心 reset database to incarnation 7; restore database until time "to_date(2024-06-01 20:24:16, yyyy-mm-dd:hh24:mi:ss)" preview summary; restore database until time "to_date(2024-06-01 22:24:16, yyyy-mm-dd:hh24:mi:ss)" preview summary; …
阅读更多...
微服务架构解密

微服务架构解密

目录 引言微服务架构简介 定义特点微服务架构的优势 灵活性与可扩展性独立部署与技术多样性故障隔离细粒度的扩展微服务架构的挑战 服务间通信数据一致性服务发现与负载均衡运维复杂性微服务与传统架构的对比 单体架构SOA架构实施微服务架构的最佳实践 持续集成与持续部署(CI/…
阅读更多...
LSDFi协议赛道4大稳定币项目，以bitget钱包为例

LSDFi协议赛道4大稳定币项目，以bitget钱包为例

纵览 LSDfi 生态繁荣的基石&#xff0c;LSD 稳定币赛道全解析 近期有许多建立在流动性质押通证的稳定币借贷协议开始出现在大众眼里&#xff0c;今天文章就要带大家来一一了解这些 LSDfi 协议究竟是如何争夺这块诱人的大饼。 LybraFinanceLSD 它透过抵押stETH/ETH 铸造&#…
阅读更多...
MySQL经典练习50题(上)（解析版）

MySQL经典练习50题(上)（解析版）

所有笔记、生活分享首发于个人博客 想要获得最佳的阅读体验&#xff08;无广告且清爽&#xff09;&#xff0c;请访问本篇笔记 MySQL经典练习50题&#xff08;上&#xff09; 创建数据库和表 -- 建 表 -- 学 生 表 CREATE TABLE Student( s_id VARCHAR(20), s_name VARCHAR(2…
阅读更多...
信道固有带宽的理解（W=f2-f1）

信道固有带宽的理解（W=f2-f1）

本文我们探讨的信道带宽主要是有线信道带宽。&#xff08;如&#xff1a;同轴电缆、双绞线等等用于电信号传输的信道&#xff09;。 在讨论之前&#xff0c;需要明确几个概念。 1、电信号是什么&#xff1a; 电信号是指随着时间而变化的电压或者电流&#xff0c;因此在数学描…
阅读更多...
Linux shell编程学习笔记57：lshw命令 获取cpu设备信息

Linux shell编程学习笔记57：lshw命令 获取cpu设备信息

0 前言 在Linux中&#xff0c;获取cpu信息的命令很多&#xff0c;除了我们已经研究的 cat /proc/cpuinfo、lscpu、nproc、hwinfo --cpu 命令&#xff0c;还有 lshw命令。 1 lshw命令的功能 lshw命令源自英文list hardware&#xff0c;即列出系统的硬件信息&#xff0c;这些硬…
阅读更多...
js怎么加密密码进行发送？js使用RSA加密

js怎么加密密码进行发送？js使用RSA加密

前端接口安全方面&#xff0c;我们在注册登录时需要对密码等信息进行加密传输&#xff0c;下面是使用非对称加密算法RSA进行加密的方法使用。 一、引入加密库 jsencrypt 可以直接引用CDN中的 jsencrypt.min.js&#xff0c;也可以使用npm进行工程化引入。 // https://cdn.boot…
阅读更多...
C++之noexcept

C++之noexcept

目录 1.概述 2.noexcept作为说明符 3.noexcept作为运算符 4.传统throw与noexcept比较 5.原理剖析 6.总结 1.概述 在C中&#xff0c;noexcept是一个关键字&#xff0c;用于指定函数不会抛出异常。如果函数保证不会抛出异常&#xff0c;编译器可以进行更多优化&#xff0c;…
阅读更多...
SpringBoot拦截器和过滤器详解及使用

SpringBoot拦截器和过滤器详解及使用

在现代Web应用程序开发中&#xff0c;尤其是在使用SpringBoot框架构建项目时&#xff0c;理解并有效利用拦截器&#xff08;Interceptor&#xff09;和过滤器&#xff08;Filter&#xff09;对于增强应用程序的功能性、安全性和可维护性至关重要。 拦截器和过滤器作为控制请求处…
阅读更多...
【Spark】从DataFrame的schema创建表

【Spark】从DataFrame的schema创建表

// 基于DataFrame创建表 def createTable(dataFrame: DataFrame,partitionColumns: Array[String],databaseName: String,tableName: String): Unit = {
阅读更多...
怎么在stm32上跑自己的神经网络

怎么在stm32上跑自己的神经网络

此教程为目前全网为数不多用于使用STM32实时跑神经网络结果输出的教程&#xff0c;不涉及原理讲解&#xff0c;只为帮助想在stm32上使用神经网络的朋友 基本步骤为先跑出神经网络得到xxx.h5文件&#xff0c;然后用cubemx把h5文件移植到stm32中&#xff0c;然后初始化设置输入输…
阅读更多...
.NET 使用Automapper映射 Record类型

.NET 使用Automapper映射 Record类型

前言 当使用Automapper进行对象映射时，通常我们会使用POCO（Plain Old CLR Object）类作为源对象和目标对象。然而，自从C# 9引入了record类型，它们提供了更简洁、不可变的对象模型。 我已经将项目的所有Dto都是用record类型，但是record类型还是有些需要注意的点，本文将介…
阅读更多...
C语言.数据结构.单链表经典算法

C语言.数据结构.单链表经典算法

数据结构.单链表经典算法 1.经典算法OJ题1&#xff1a;移除链表元素1.1题目描述&#xff1a;1.2题解&#xff1a;1.3图文解释&#xff1a; 2.经典算法OJ题2&#xff1a;反转链表2.1题目描述&#xff1a;2.2题解&#xff1a;2.3图文解释 3.经典算法OJ题3&#xff1a;合并两个有序…
阅读更多...
编译和运行qemu-uboot-arm64单板的Armbian系统

编译和运行qemu-uboot-arm64单板的Armbian系统

这篇文章ARM虚拟机安装OMV-CSDN博客遗留一个启动qemu-uboot-arm64单板Armbian镜像的问题&#xff0c;使用官方下载的镜像&#xff0c;会报错&#xff1a; fatal: no kernel available .... Failed to load /vmlinuz ...... qemu-system-aarch64 -smp 8 -m 8G -machine virt …
阅读更多...
代码随想录算法训练营第20天|二叉树

代码随想录算法训练营第20天|二叉树

654. 最大二叉树 思路和由中后序列构建树的思路是一样的&#xff0c;只不过这里不是通过后序的最后一个数来进行分割&#xff0c;而是通过找最大值进行分割左右子树 迭代找出左子树和右子树的的边界&#xff0c;返回当前节点就行了 具体代码后续补 617. 合并二叉树 这里的retu…
阅读更多...
最新文章

Copyright @ 2022~2023