vue入门及小项目小便签条

vue
框架:是一个半成品软件,是一套可重用的,通用的,软件基础代码模型。基于框架进行开发,更加快捷 ,更加高效 
v-bind为HTML标签绑定属性值,如设置href,css样式等
v-model在表单元素上创建双向数据绑定
el:挂载点
data:数据对象
methods:方法对象
vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时,遵守js语法即可

v-text设置标签的文本值
在el命中标签内部及子类的属性中设置data中的值,即可在该标签内部 显示该属性ps:可以进行字符串的拼接
v-HTML设置文本的HTML
普通文本和v-text一样
html格式的文本会被解析成对应的标签
v-on
为元素绑定事件
eg:
v-on:click="dolt"
"v-on:"可以替换成@符
传递自定义参数,事件修饰符

v-show
操纵display元素
根据表达式的真假,切换元素的显示和隐藏
false隐藏
true显示
通常用一个变量表示该值,再用一个方法控制 该值,再将该方法绑定一个事件

v-if
根据表达式的真假,切换元素的显示状态
操纵dom树移除元素再添加回来
频繁切换用v-show因为操作dom消耗较大

v-bind
设置元素的属性eg:src,title,class
v-bind可以省略
直接   :属性名="属性值"
.active{
    border:1px
}
:class="{active:isActice}"

v-for
根据数据生成列表结构 
<li v-for="item in arr">黑马程序员{{item}}</li>

<li v-for="(值,索引) in arr">

v-model
获取和设置表单元素的值(双向数据绑定)
 

小便签条

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>s</title><style>#bigbox {position: absolute;height: auto;width: 300px;left: 500px;top: 30%;border: solid black 3px;}.an {height: 100px;border: solid black 3px;list-style-type: none;}.an:hover {border: solid red 3px;}</style>
</head><body><div id="bigbox"><input type="text" v-model="inner" @keyup.enter="add"><ul><li v-for="(item,index) in arr" v-text="(index+1)+item" class="an" @dblclick="subta(index)"></li></ul><button @click="cleann">clean</button><p v-text="content"></p></div><script src="vue.js"></script><script>var app = new new Vue({el: "#bigbox",data: {arr: ["写代码", "吃饭饭", "睡觉觉"],inner: "好好学习",content: 3},methods: {add: function () {if (this.inner != "") {this.arr.push(this.inner)this.inner = ""this.content++;}},subta: function (index) {this.arr.splice(index, 1)this.content--;},cleann: function () {this.arr.splice(0, this.arr.length)this.content = 0}},})</script>
</body></html>

 

 

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

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

相关文章

C++ 太卷,转 Java?

最近看到知乎、牛客等论坛上关于 C 很多帖子&#xff0c;比如&#xff1a; 2023年大量劝入C 2023年还建议走C方向吗&#xff1f; 看了一圈&#xff0c;基本上都是说 C 这个领域唯一共同点就是都使用 C 语言&#xff0c;其它几乎没有相关性。 的确是这样&#xff0c;比如量化交…

c++模版元编程-函数模版

C模板元编程&#xff08;Template Metaprogramming&#xff0c;TMP&#xff09;是一种使用C模板语言特性进行编程的技术&#xff0c;主要用于在编译期间进行计算和类型推导。通过使用TMP&#xff0c;可以在编译期间生成代码&#xff0c;从而实现更高效和更灵活的程序设计。 TM…

VM ware中Linux连网

在公司时,想搭建一下docker,结果发现连不上网,那就自己动手操作一下 一、联网配置 1.1 ping 发现ping不通&#xff0c;说明虚拟机此时无法与外界网络互连&#xff0c;需要修改设置联网 1.2 ifconfig查看网络配置 注意第一行显示的是ens33还是ens32,后面配置会用到 1.3 获取ro…

达梦数据库如何收集统计信息?

1、收集shema统计信息 CALL DBMS_STATS.GATHER_SCHEMA_STATS(大写的用户名,100,TRUE,FOR ALL COLUMNS SIZE AUTO); 2、收集表的统计信息 CALL DBMS_STATS.GATHER_TABLE_STATS(大写的用户名, 大写的表名,NULL,100,TRUE,FOR ALL COLUMNS SIZE AUTO); 3、收集索引的统计信息 CALL…

WebGL模型视图投影矩阵

WebGL透视投影_山楂树の的博客-CSDN博客中的PerspectiveView代码一个问题是&#xff0c;我们用了一大段枯燥的代码来定义所有顶点和颜色的数据。示例中只有6个三角形&#xff0c;我们还可以手动管理这些数据&#xff0c;但是如果三角形的数量进一步增加的话&#xff0c;那可真就…

如何在 Excel 中求平方根

需要在 Excel 中求一个数字的平方根吗&#xff1f;使用几个内置的 Excel 函数和公式可以轻松计算平方根。在本分步指南中&#xff0c;您将学习在 Excel 中计算平方根的 5 种不同方法&#xff0c;包括使用 SQRT 函数、POWER 函数、指数公式、VBA 代码和 Power Query。跟随教程&a…

TrOCR – 基于 Transformer 的 OCR 入门

一、TrOCR 架构 近些年,光学字符识别 (OCR) 出现了多项创新。它对零售、医疗保健、银行和许多其他行业的影响是巨大的。与深度学习的许多其他领域一样,OCR领域也看到了Transformer 神经网络的重要性和影响。如今,出现了像TrOCR(Transformer OCR)这样的模型,它在准确性方面…

查看实时日志

要查看实时日志&#xff0c;您可以使用以下几种常见的方法&#xff1a; 使用 tail 命令&#xff1a; tail 命令可以显示文件的末尾内容&#xff0c;您可以结合 -f 参数实时地查看日志文件的更新。例如&#xff1a; tail -f /path/to/logfile.log 将 /path/to/logfile.log 替换…

项目知识点总结-分页(三)

后端分页查询接口&#xff1a; Controller Service&#xff1a; Mapper&#xff1a; //分页搜索会议的方法List<SearchMeeting> getAllSearchMeeting(Param("sm") SearchMeeting searchMeeting,Param("page") Integer page,Param("pageSize&q…

games101 作业2

题目 光栅化一个三角形 1. 创建三角形的 2 维 bounding box。 2. 遍历此 bounding box 内的所有像素&#xff08;使用其整数索引&#xff09;。然后&#xff0c;使用像素中心的屏幕空间坐标来检查中心点是否在三角形内。 3. 如果在内部&#xff0c;则将其位置处的插值深度值 (…

我学编程全靠B站了,真香(第一期)

你好&#xff0c;我是Martin。 我是就读于B站大学2020届的Martin同学&#xff0c;反正我学习计算机真的是全靠 B 站了。 我是个刷视频狂魔&#xff0c;B站收藏夹里也收藏了很多编程类视频&#xff0c; 比如C/C、Go语言、操作系统、数据结构和算法、计算机网络、数据库、Pyth…

Pytorch中张量矩阵乘法函数(mm, bmm, matmul)使用说明,含高维张量实例及运行结果

Pytorch中张量矩阵乘法函数使用说明 1 torch.mm() 函数1.1 torch.mm() 函数定义及参数1.2 torch.bmm() 官方示例 2 torch.bmm() 函数2.1 torch.bmm() 函数定义及参数2.2 torch.bmm() 官方示例 3 torch.matmul() 函数3.1 torch.matmul() 函数定义及参数3.2 torch.matmul() 规则约…

并查集与LRUCache

一)并查集 在一些应用问题中&#xff0c;需要将N个不同的元素划分成一些互不相交的集合&#xff0c;开始的时候&#xff0c;每一个元素自成一个单元素集合&#xff0c;然后按照一定的规律将归于同一组元素的集合进行合并&#xff0c;并且在此过程中需要反复使用到查询某一个元素…

使用grubby更改RHEL7/8/9的默认内核

使用grubby更改RHEL7/8/9的默认内核 验证默认内核版本获取当前默认内核的索引号检查所有内核的详细信息检查已安装的内核 更改默认内核引导条目使用索引号更改默认内核引导条目 验证默认内核版本 参考&#xff1a;https://linux.cn/article-16147-1.html # 验证默认内核版本 …

zookeeper源码(01)集群启动

本文介绍一下zookeeper-3.5.7集群安装。 解压安装 tar zxf apache-zookeeper-3.5.7-bin.tar.gz创建数据、日志目录&#xff1a; mv apache-zookeeper-3.5.7-bin /app/zookeeper-3.5.7 cd /app/zookeeper-3.5.7mkdir data mkdir logs编辑配置文件 zoo.cfg文件 cp conf/zoo_…

炫云云渲染3ds max效果图渲染教程

很多人在第一次使用炫云云渲染渲染效果图的时候不知道怎么使用&#xff0c;其实现在使用炫云渲染效果图真的很简单&#xff0c;我们一起来看看。 一客户端安装 1、打开炫云云渲染官网&#xff0c;点击右上角的客户端下载&#xff0c;选择炫云客户端&#xff08;NEXT版&#xf…

【JavaEE】多线程(三)

多线程&#xff08;三&#xff09; 续上文&#xff0c;多线程&#xff08;二&#xff09;&#xff0c;我们已经讲了 创建线程Thread的一些重要的属性和方法 那么接下来&#xff0c;我们继续来体会了解多线程吧~ 文章目录 多线程&#xff08;三&#xff09;线程启动 startsta…

华为云云耀云服务器L实例评测|cento7.9在线使用cloudShell下载rpm解压包安装mysql并开启远程访问

文章目录 ⭐前言⭐使用华为cloudShell连接远程服务器&#x1f496; 进入华为云耀服务器控制台&#x1f496; 选择cloudShell ⭐安装mysql压缩包&#x1f496; wget下载&#x1f496; tar解压&#x1f496; 安装步骤&#x1f496; 初始化数据库&#x1f496; 修改密码&#x1f4…

实验4 交换机端口隔离(access模式)

交换机端口隔离&#xff08;access模式&#xff09; 实验目的实验拓扑实验步骤&#xff08;1&#xff09;在未划分vlan前&#xff0c;配置pc1、pc2的地址&#xff0c;如图所示&#xff08;2&#xff09;测试两台pc机的连通性&#xff08;3&#xff09;创建vlan&#xff0c;并验…

在 MySQL 中MATCH 是用于全文搜索的关键字

在 MySQL 中&#xff0c;MATCH 是用于全文搜索的关键字。在使用 MATCH 进行全文搜索时&#xff0c;需要注意以下几点&#xff1a; 1. MATCH 关键字只能与 FULLTEXT 索引一起使用。所以&#xff0c;在进行全文搜索之前&#xff0c;请确保你的表上已经创建了 FULLTEXT 索引。 …