Vue中的一些指令与计算方法

news/2024/6/16 10:37:05/文章来源:https://blog.csdn.net/Luo3255069063/article/details/135888219

语法

插值语法

HTML的双标签内容中使用,在{{}}之内书写JS代码

属性语法

1.v-bind:
2.:属性名="值"v-bind="值"

事件语法

v-on@
v-on:事件名="方法名"@事件名="方法名"

选项

选项:可选的配置项——官方API文档规定
1.el:vue对象管理的元素,值是id选择器
2.data:存放元素携带的数据,页面中动态变化的数据都在data中进行定义并给初始值
3.methods:存放元素携带的函数

插值语法

<div id='#app'><p>{{数值/字符串/布尔值/三目运算/表达式/函数new Data()}}</p>
</div>
<script>new Vue({el:'#app',data(){return{uname:'tom',age:18,isMarried:false}}})
</script>

指令

1.属性绑定

v-bind:简写成:
注意:模版字符串

<img :src="url" />	//url="https://codeboy.com/1.jpg"
<img :src="`img/${url}`">	//url='1.jpg'

2.事件绑定

v-on:简写成@
事件种类:click 表示单机事件 mouseover 表示鼠标移入的事件

3.方法绑定

class的样式绑定

<img :class="active" src="" />//style	.active{border:2px solid orange;}
<img :class="active:表达式" > 表达式的给过为true,样式active会添加上;如果false,样式不生效

4.v-for

如图所示:
在这里插入图片描述
(1)一般的,有v-for的地方就必须有key属性
(2)key 的属性值,必须独一无二;一般的,遍历数组时可以用下标;如果遍历的是对象,可以用对象中的特殊属性比如id等
代码示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-for</title><script src="../vue.js"></script>
</head>
<body>
<div id="app"><div  v-for="(data,index) of arr" :key="index">{{data}}------------{{index}}</div>
</div>
<script type="text/javascript">new Vue({el:'#app',data:{arr:[1,2,3,4,5,6,7,8,9]}})
</script>
</body>
</html>

运行截图:
在这里插入图片描述
双重遍历:
示例代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-for</title><script src="../vue.js"></script>
</head>
<body>
<div id="app"><div  v-for="data of students" :key="data.id"><p v-for="(value,index) of students" :key="index">{{index}}-----------------{{value}}</p></div><script type="text/javascript">new Vue({el:'#app',data(){return{students:[{id:001,name:'zhangsan',age:18},{id:002,name:'lisi',age:19},{id:003,name:'wangwu',age:20},{id:004,name:'zhaoliu',age:21}]}}})</script>
</div>
</body>
</html>

运行截图:
在这里插入图片描述

绑定属性值

示例代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模板</title><script src="../vue.js"></script><style>.d1{width: 100px;height: 100px;background-color: red;}</style>
</head>
<body>
<div id="app"><h3>绑定属性值</h3><div class="d1"></div><div v-bind:class="className"></div><div :class="className"></div></div>
<script type="text/javascript">new Vue({el:"#app",data(){return{className:"d1"}},methods:{}})
</script>
</body>
</html>

运行截图:
在这里插入图片描述

非指令属性设置属性值,直接赋值就会当做普通字符串解析,绑定数据时,优先解析成其他数据类型,如果不能解析成其他数据类型,就当做数据名解析。

双向绑定

作用:让元素的value属性和数据绑定在一起,value值发生变化时,数据也跟着一起变,数据发生变化时,value值也跟着变;经过双向绑定,可以用数据代表元素的value的值。
代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模板</title><script src="../vue.js"></script>
</head>
<body>
<h3>双向绑定</h3>
<div id="app"><input type="text" v-model="val" @blur="fn2"><button @click="fn1">修改val</button>
</div>
<script type="text/javascript">new Vue({el:"#app",data(){return{val:"123"}},methods:{fn1(){this.val=Math.random()},fn2(){this.val="456"}}})
</script>
</body>
</html>

运行截图:
在这里插入图片描述
v-mode是一个语法糖
双向绑定的原理:
(1)把数据绑定给value属性
(2)每一次修改元素的value都会把修改后的值赋值给数据

计算属性

作用:从一个数据或多个衍生出另外一个数据就使用计算属性
示例代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模板</title><script src="../vue.js"></script>
</head>
<body>
<div id="app">{{a}}{{b}}<br>{{sum}}
</div>
<script type="text/javascript">new Vue({el:"#app",data(){return{a:10,b:20}},methods:{},computed:{sum(){return this.a+this.b}}})
</script>
</body>
</html>

运行截图:
在这里插入图片描述
特性:
(1)声明的时候是方法,可以满足在衍生的过程中完成其他功能
(2)使用的时候是数据,怎么使用数据就怎么使用计算属性
(3)计算属性的应用场景,是衍生过程复杂或者在这个过程中要完成其他功能
(4)计算属性的执行契机:第一次加载组件时会执行一次,后续当方法的依赖数据发生数据改变时,会再次执行
(5)依赖数据:只要出现在方法中的数据,就是依赖数据

不复杂的衍生过程:
普通计算或者直接访问属性

缓存性:使用多次计算属性方法,经过第一次衍生过程,会把结果存入缓存,后续使用直接存缓存中拿结果,而不会再次执行方法。
强调:计算属性如果不被使用,那么方法永远不会执行

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

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

相关文章

3D分割项目 | 基于Pytorch+3DUnet实现的3D体积语义分割算法

项目应用场景 用于 3D 体积语义分割场景&#xff0c;适用于各种物体的 3D 语义分割&#xff0c;比如大米、大豆的体积分割等 项目效果&#xff1a; 项目流程 > 具体参见项目内README.md (1) 安装 conda install -c conda-forge mamba mamba create -n pytorch-3dunet -c p…

OpenHarmony如何模拟搭建本地http静态服务

简介 本文是在基于OpenHarmony 4.0的基础上&#xff0c;介绍了一种编写一个前端http静态服务的思路. 方案设计 在OpenHarmony上&#xff0c;如果想要访问本地网页。有两种方案 u 方案一&#xff1a;使用file协议&#xff0c;将html放至entry/src/main/resource/rawfile下&#…

Vue 3中ref和reactive的区别

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

hcia datacom课程学习(5):MAC地址与arp协议

1.MAC地址 1.1 含义与作用 &#xff08;1&#xff09;含义&#xff1a; mac地址也称物理地址&#xff0c;是网卡设备在数据链路层的地址&#xff0c;全世界每一块网卡的mac地址都是唯一的&#xff0c;出厂时烧录在网卡上不可更改 &#xff08;2&#xff09;作用&#xff1a…

分布式部署LNMP,搭建discuz论坛

LNMP 是一种常见的服务器环境配置&#xff0c;用于运行 Web 应用程序。它由 Linux、Nginx、MySQL&#xff08;或 MariaDB&#xff09;、PHP 组成。 一、安装数据库 数据库主机(192.168.50.101)安装mysql服务 将安装mysql 所需软件包传到/opt目录下安装环境依赖包配置软件模块…

【数据结构】AVL 树

文章目录 1. AVL 树的概念2. AVL 树节点的定义3. AVL 树的插入4. AVL 树的旋转5. AVL 树的验证6. AVL 树的删除7. AVL 树的性能 前面对 map / multimap / set / multiset 进行了简单的介绍【C】map & set&#xff0c;在其文档介绍中发现&#xff0c;这几个容器有个共同点是…

非关系型数据库--------------Redis配置与优化

目录 一、关系型数据库与非关系型数据库 1.1关系型数据库 1.2非关系型数据库 1.2.1非关系型数据库产生背景 1.3关系型非关系型区别 二、Redis 2.1redis简介 2.2Redis命中机制和淘汰机制 2.3Redis 具有以下优点 2.3.1具有极高的数据读写速度 2.3.2redis支持丰富的数据…

2024年最受欢迎的 19 个 VS Code 主题排行榜

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

四川古力未来科技抖音小店:把握电商新风口,前景无限广阔

在数字化浪潮席卷全球的今天&#xff0c;电商行业以其独特的魅力和无限潜力&#xff0c;成为了众多创业者和投资者关注的焦点。四川古力未来科技抖音小店&#xff0c;正是站在这一风口浪尖上的新兴力量&#xff0c;其前景之广阔&#xff0c;令人瞩目。 抖音&#xff0c;作为一款…

[Python人工智能] 四十五.命名实体识别 (6)利用keras构建CNN-BiLSTM-ATT-CRF实体识别模型(注意力问题探讨)

从本专栏开始,作者正式研究Python深度学习、神经网络及人工智能相关知识。前文讲解融合Bert的实体识别研究,使用bert4keras和kears包来构建Bert+BiLSTM-CRF模型。这篇文章将详细结合如何利用keras和tensorflow构建基于注意力机制的CNN-BiLSTM-ATT-CRF模型,并实现中文实体识别…

RWKV_Pytorch:支持多硬件适配的开源大语言模型推理框架

亲爱的技术探索者们&#xff0c;今天我要向大家隆重推荐一个在开源社区中崭露头角的项目——RWKV_Pytorch。这是一个基于Pytorch的RWKV大语言模型推理框架&#xff0c;它不仅具备高效的原生Pytorch实现&#xff0c;而且还扩展了对多种硬件的适配支持&#xff0c;让模型的部署和…

Ubuntu joystick 测试手柄 xbox

Ubuntu joystick 测试手柄 xbox 测试使用Ubuntu20.04 测试环境在工控机 安装测试 实际测试使用的手柄是北通阿修罗2pro 兼容xbox Ubuntu20.04主机 连接手柄或者无线接收器后查看是否已经检测到&#xff1a; ls /dev/input找到输入中的 js0 即为手柄输入 需要安装joysti…

数据可视化为什么能在智慧港口中发挥作用?

随着全球贸易活动日益频繁&#xff0c;港口作为国际贸易的重要节点&#xff0c;其运营效率与智能化程度直接影响着整个物流链的效能。在此背景下&#xff0c;智慧港口的概念应运而生&#xff0c;它借助先进的信息技术手段对传统港口进行改造升级&#xff0c;其中&#xff0c;数…

HarmonyOS 应用开发之任务(Mission)管理场景介绍

任务&#xff08;Mission&#xff09;管理相关的基本概念如下&#xff1a; AbilityRecord&#xff1a;系统服务侧管理一个UIAbility实例的最小单元&#xff0c;对应一个应用侧的UIAbility组件实例。系统服务侧管理UIAbility实例数量上限为512个。MissionRecord&#xff1a;任务…

物联网学习2、MQTT 发布/订阅模式介绍

MQTT 发布/订阅模式 发布订阅模式&#xff08;Publish-Subscribe Pattern&#xff09;是一种消息传递模式&#xff0c;它将发送消息的客户端&#xff08;发布者&#xff09;与接收消息的客户端&#xff08;订阅者&#xff09;解耦&#xff0c;使得两者不需要建立直接的联系也不…

Kubernetes(K8S)学习(四):K8S之Storage

K8S之Storage 一、Storage1.1、Volume1.2、PersistentVolume&#xff08;PV&#xff09;1.3、PersistentVolumeClaim&#xff08;PVC&#xff09;1.4、StorageClass1.5、PV的状态和回收策略 kubernetes使用NFS共享存储有两种方式&#xff1a; &#xff08;1&#xff09;手动方式…

Spring——框架介绍

每一个Java技术中都会存在一个“核心对象”&#xff0c;这个核心对象来完成主要任务为了得到核心对象&#xff0c;需要创建若干个辅助对象&#xff0c;从而导致开发步骤增加JDBC中 JDBC 核心对象——PreparedStatement 通过DriverManager得到数据库厂商提供的Driver对象DriverM…

如何在Win10部署Oracle数据库并实现无公网IP使用PL SQL远程访问

文章目录 前言1. 数据库搭建2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射 3. 公网远程访问4. 配置固定TCP端口地址4.1 保留一个固定的公网TCP端口地址4.2 配置固定公网TCP端口地址4.3 测试使用固定TCP端口地址远程Oracle 前言 Oracle&#xff0c;是甲骨文公司的一款关系…

Vivado VIO IP核(Virtual Input/Output)的使用

前言 在Aurora通信工程中&#xff0c;有一个专门产生Aurora数据包的模块&#xff0c;该模块在Aurora ip准备好后会自动根据计数器产生发送的数据包。 但现在希望能实时地控制数据包的发送以及中断&#xff0c;这时候可以采用vivado的vio ip核处理。 VIO IP 调用VIO IP核可以…

MySQL主从复制与读写分离(重要!)

目录 引言 一、主从复制 1.1 MySQL主从复制原理 1.1.1 为什么进行复制&#xff1f; 1.1.2 谁复制谁&#xff1f; 1.1.3 数据放在什么地方&#xff1f; 1.1.4 MySQL主从版本问题 1.2 MySQL的复制类型 1.3 MySQL主从复制的工作过程 1.4 MySQL主从复制延迟原因 1.5 MyS…