Vue--1.4Vue指令

Vue会根据不同的指令，针对标签实现不同的功能。

指令：带有v-前缀的特殊标签属性

v-前缀="表达式"

1.v-html

作用:动态解析标签innerHTML

<!doctype html>
<html>
<head><meta charset="utf-8"><meta name="Author" content=""/><meta name="Keywords" content=""/><meta name="Description" content=""/>
</head>
<body>
<div id="app"><div v-html="msg"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>const app=new Vue({el:'#app',data:{msg:'<a href="http://www.itheima.com">黑马程序员</a>'}})
</script>
</html>

2.v-show

作用：控制元素显示隐藏

语法：v-show=“表达式” 表达式值true显示，false隐藏

原理：从css角度进行了隐藏，添加了display:none;

场景：频繁切换显示隐藏的场景

3.v-if

作用：控制元素显示隐藏（条件渲染）

语法：v-if=“表达式” 表达式值true显示，false隐藏

场景：要么显示，要么隐藏，不频繁切换的场景

4.v-else v-else-if

作用：辅助v-if进行判断渲染

语法：v-else v-else-if=“表达式”

注意：需要紧挨着v-if一起使用

<!doctype html>
<html>
<head><meta charset="utf-8"><meta name="Author" content=""/><meta name="Keywords" content=""/><meta name="Description" content=""/>
</head>
<body>
<div id="app"><p v-if="gender==1">性别：男</p><p v-else>性别：女</p><hr><p v-if="score>=90">成绩评定A:奖励电脑一台</p><p v-else-if="score>=75">成绩评定B:奖励周末郊游</p><p v-else-if="score>=60">成绩评定C:奖励零食礼包</p><p v-else>成绩评定D:奖励一周不能玩手机</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>const app=new Vue({el:'#app',data:{gender:1,score:80}})
</script>
</html>

5.v-on

作用：注册事件=添加监听+提供处理逻辑

语法：1）v-on：事件名=“内联语句”

2）v-on：事件名=“methods中的函数名”

简写：@事件名=""

注意：methods函数内的this指向Vue实例

<!doctype html>
<html>
<head><meta charset="utf-8"><meta name="Author" content=""/><meta name="Keywords" content=""/><meta name="Description" content=""/>
</head>
<body>
<div id="app"><!-- 鼠标点击 --><button @click="count--">-</button>    <!-- @=v-on: --><span>{{count}}</span><button v-on:click="count++">+</button><hr><!-- 鼠标划入 --><button v-on:mouseenter="count--">-</button><span>{{count}}</span><button v-on:mouseenter="count++">+</button><hr><button @click="fn">切换显示隐藏</button><h1 v-show="isShow">黑马程序员</h1>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>const app=new Vue({el:'#app',data:{count:0,isShow:true},methods:{//methods中的函数使用this都指向当前实例fn(){app.isShow=!app.isShow  //this.isShow=!this.isShow}}})
</script>
</html>

v-on调用传参

实例：饮料自动贩卖机

<!doctype html>
<html>
<head><meta charset="utf-8"><meta name="Author" content=""/><meta name="Keywords" content=""/><meta name="Description" content=""/>
</head>
<body>
<div id="app"><div style="border:2px solid #000;width:140px;height:auto;padding:20px;border-radius:15px;"><h3>饮料自动售货机</h3><button @click="buy(5)">可乐5元</button><button @click="buy(10)">咖啡10元</button></div><p>银行卡余额:{{money}}元</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>const app=new Vue({el:'#app',data:{money:100},methods:{buy(a){this.money-=a}}})
</script>
</html>

6.v-bind

作用：动态的设置html的标签属性->src url title......

语法：v-bind:属性名=“表达式”

简写：:属性名=“表达式”

<!doctype html>
<html>
<head><meta charset="utf-8"><meta name="Author" content=""/><meta name="Keywords" content=""/><meta name="Description" content=""/>
</head>
<body>
<div id="app"><!-- v-bind:src可简写为:src --><img v-bind:src="imgUrl" v-bind:title="msg">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>const app=new Vue({el:'#app',data:{imgUrl:'./image/logo.jpeg',msg:'hello Vue'}})
</script>
</html>

实例：图片轮播

<!doctype html>
<html>
<head><meta charset="utf-8"><meta name="Author" content=""/><meta name="Keywords" content=""/><meta name="Description" content=""/>
</head>
<body>
<div id="app"><button @click="i--" v-show="i>0">上一页</button><img :src="imgList[i]" style="width:300px;"><button @click="i++" v-show="i<imgList.length-1">下一页</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>const app=new Vue({el:'#app',data:{i:0,imgList:['./image/1.jpg','./image/2.jpg','./image/3.jpg',]}})
</script>
</html>

7.v-for

作用：基于数据循环，多次渲染整个元素 ->数组、对象、数字...

语法：v-for=“(item,index) in 数组”  item是每一项，index是下标

如果不需要index，可简写为v-for=“item in 数组”

<!doctype html>
<html>
<head><meta charset="utf-8"><meta name="Author" content=""/><meta name="Keywords" content=""/><meta name="Description" content=""/>
</head>
<body>
<div id="app"><h3>水果店</h3><ul><li v-for="(item,index) in list">{{item}}</li><li v-for="item in list">{{item}}</li></ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>const app=new Vue({el:'#app',data:{list:['西瓜','葡萄','桃子']}})
</script>
</html>

实例：书架

<!doctype html>
<html>
<head><meta charset="utf-8"><meta name="Author" content=""/><meta name="Keywords" content=""/><meta name="Description" content=""/>
</head>
<body>
<div id="app"><h3>书架</h3><ul><li v-for="(item,index) in booksList"><span>{{item.name}}</span><span>{{item.author}}</span><button @click="del(item.id)">删除</button></li></ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>const app=new Vue({el:'#app',data:{booksList:[{id:1,name:'《红楼梦》',author:'曹雪芹'},{id:2,name:'《西游记》',author:'吴承恩'},{id:3,name:'《水浒传》',author:'施耐庵'},{id:4,name:'《三国演义》',author:'罗贯中'}]},methods:{del(id){//filter:根据条件，保留满足条件的对应项，得到一个新数组//箭头函数filter(item=>item.id!==id)相当于filter(item){item.id!==id}this.booksList=this.booksList.filter(item=>item.id!=id)}}})
</script>
</html>
v-for中的key

语法：：key=""

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

如果不添加key，那么v-for的默认行为会尝试原地修改元素（就地复用）

注意点：

1）key的值只能是字符串或数字类型

2）key的值必须具有唯一性

3）推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

<li v-for="(item,index) in xxx" :key="xxx.id"></li>

8.v-model

作用：给表单元素使用，双向数据绑定->可以快速获取或设置表单元素内容

1)数据变化->试图自动更新

2)视图变化->数据自动更新

语法：v-model='变量'

<!doctype html>
<html>
<head><meta charset="utf-8"><meta name="Author" content=""/><meta name="Keywords" content=""/><meta name="Description" content=""/>
</head>
<body>
<div id="app">账户：<input type="text" v-model="username"><br><br>密码：<input type="password" v-model="password"><br><br><button @cilck="login">登录</button><button @click="reset">重置</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>const app=new Vue({el:'#app',data:{username:'',password:''},methods:{login(){console.log(this.username)},reset(){this.username='',this.password=''}}})
</script>
</html>

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

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

相关文章

计算机竞赛 基于深度学习的动物识别 - 卷积神经网络 机器视觉 图像识别

计算机竞赛 基于深度学习的动物识别 - 卷积神经网络 机器视觉 图像识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…
阅读更多...
详解初阶数据结构之顺序表（SeqList）——单文件文件实现SeqList的增删查改

详解初阶数据结构之顺序表（SeqList）——单文件文件实现SeqList的增删查改

目录 一、线性表 二、顺序表 2.1概念及结构 2.2接口实现 2.3动态顺序表的创建 2.3动态顺序表的初始化 2.3.1传值初始化 2.3.2传址初始化 2.4动态顺序表的清空 2.5动态顺序表的扩容 2.6动态顺序表内容的打印 三、动态顺序表的使用 3.1尾插尾删 3.1.1尾插 3.1.2尾删…
阅读更多...
软件测试/测试开发丨ChatGPT：带你进入智能对话的新时代

软件测试/测试开发丨ChatGPT：带你进入智能对话的新时代

简介 人工智能时代来临 我们正处于AI的iPhone时刻。——黄仁勋&#xff08;英伟达CEO&#xff09; ChatGPT 好得有点可怕了&#xff0c;我们距离危险的强人工智能不远了。——马斯克&#xff08;Tesla/SpaceX/Twitter CEO&#xff09; 以上的内容说明我们现在正处于一个技术大…
阅读更多...
【uni-app】

【uni-app】

准备工作 1.下载hbuilder&#xff0c;插件使用Vue3的uni-app项目 2.需要安装编译器 3.下载微信开发者工具 4.点击运行->微信开发者工具 5.打开微信开发者工具的服务端口 效果图 page.json&#xff08;添加路由&#xff0c;修改底层导航栏&#xff0c;背景色&#xff09…
阅读更多...
读书笔记：多Transformer的双向编码器表示法(Bert)-1

读书笔记：多Transformer的双向编码器表示法(Bert)-1

多Transformer的双向编码器表示法 Bidirectional Encoder Representations from Transformers&#xff0c;即Bert&#xff1b; 本笔记主要是对谷歌Bert架构的入门学习&#xff1a; 介绍Transformer架构&#xff0c;理解编码器和解码器的工作原理&#xff1b;掌握Bert模型架构…
阅读更多...
2023.9.7 关于 TCP / IP 的基本认知

2023.9.7 关于 TCP / IP 的基本认知

目录 网络协议分层 TCP/IP 五层&#xff08;四层&#xff09;模型 应用层 传输层 网络层&#xff08;互联网层&#xff09; 数据链路层&#xff08;网络接口层&#xff09; 物理层 网络数据传输的基本流程 网络协议分层 为什么需要分层&#xff1f; 分层之后&#xff0c…
阅读更多...
MATLAB实现数据插值

MATLAB实现数据插值

目录 一.理论知识 二.一维插值实例 三.二维插值实例 一.理论知识 所谓插值&#xff0c;顾名思义&#xff0c;插入数值。很多时候&#xff0c;我们仅有离散点上的数据&#xff0c;这时如果我们想要分析变量之间的函数关系&#xff0c;则无法实现。但如果通过插值处理&#xf…
阅读更多...
PCL入门（四）：kdtree简单介绍和使用

PCL入门（四）：kdtree简单介绍和使用

目录 1. kd树的意义2. kd树的使用 参考博客《欧式聚类&#xff08;KD-Tree&#xff09;详解&#xff0c;保姆级教程》和《(三分钟)学会kd-tree 激光SLAM点云搜索常见》 1. kd树的意义 kd树是什么&#xff1f; kd树是一种空间划分的数据结构&#xff0c;对于多个维度的数据&a…
阅读更多...
电商（淘宝1688京东拼多多等）API接口服务：提升商业效率和用户体验的关键

电商（淘宝1688京东拼多多等）API接口服务：提升商业效率和用户体验的关键

电商API接口服务&#xff1a;提升商业效率和用户体验的关键 随着电子商务的飞速发展&#xff0c;电商企业需要不断提升自身的业务能力和服务质量&#xff0c;以应对日益激烈的市场竞争。为了更好地满足商家和消费者的需求&#xff0c;电商API接口服务应运而生。本文将探讨电商…
阅读更多...
计算机毕设 大数据商城人流数据分析与可视化 - python 大数据分析

计算机毕设 大数据商城人流数据分析与可视化 - python 大数据分析

文章目录 0 前言课题背景分析方法与过程初步分析&#xff1a;总体流程&#xff1a;1.数据探索分析2.数据预处理3.构建模型 总结 最后 0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕设题目缺少创新和亮点&#xff0c;往往达不到…
阅读更多...
jmeter调试错误大全

jmeter调试错误大全

一、前言 在使用jmeter做接口测试的过程中大家是不是经常会遇到很多问题&#xff0c;但是无从下手&#xff0c;不知道从哪里开始找起&#xff0c;对于初学者而言这是一个非常头痛的事情。这里结合笔者的经验&#xff0c;总结出以下方法。 二、通过查看运行日志调试问题 写好…
阅读更多...
【常用代码14】el-input输入框内判断正则，只能输入数字，过滤汉字+字母。

【常用代码14】el-input输入框内判断正则，只能输入数字，过滤汉字+字母。

问题描述&#xff1a; el-input输入框&#xff0c;只能输入数字&#xff0c;但是不能显示输入框最右边的上下箭头&#xff0c; <el-input v-model"input" type"number" placeholder"请输入内容" style"width: 200px;margin: 50px 0;&…
阅读更多...
两种解法解决LCR 008. 长度最小的子数组【C++】

两种解法解决LCR 008. 长度最小的子数组【C++】

文章目录 [LCR 008. 长度最小的子数组](https://leetcode.cn/problems/2VG8Kg/description/)解法暴力解法滑动窗口&#xff08;双指针法&#xff09; LCR 008. 长度最小的子数组 解法 暴力解法 //暴力解法&#xff1a; //使用双for循环依次遍历数组&#xff0c;罗列出所有情况…
阅读更多...
华为云 异构数据迁移

华为云 异构数据迁移

数据库和应用迁移 UGO&#xff08;Database and Application Migration UGO&#xff0c;以下简称为UGO&#xff09;是专注于异构数据库结构迁移的专业服务。可将源数据库中的DDL、DML和DCL一键自动转换为华为云GaussDB/RDS的SQL语法&#xff0c;通过数据库评估、对象迁移两大核…
阅读更多...
计算机竞赛 基于深度学习的植物识别算法 - cnn opencv python

计算机竞赛 基于深度学习的植物识别算法 - cnn opencv python

文章目录 0 前言1 课题背景2 具体实现3 数据收集和处理3 MobileNetV2网络4 损失函数softmax 交叉熵4.1 softmax函数4.2 交叉熵损失函数 5 优化器SGD6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习的植物识别算法 ** …
阅读更多...
Vue3，Typescript中引用组件路径无法找到模块报错

Vue3，Typescript中引用组件路径无法找到模块报错

是这么个事&#xff0c;我在vue3新创建的项目里&#xff0c;写了个组件叫headerIndex.vue&#xff0c;放到app.vue中import就会报错 路径肯定没写错&#xff0c;找到了解决方法&#xff0c;但是也没想明白为什么 解决方法如下 在vite-env.d.ts文件中加入 declare module &qu…
阅读更多...
AJAX学习笔记6 JQuery对AJAX进行封装

AJAX学习笔记6 JQuery对AJAX进行封装

AJAX学习笔记5同步与异步理解_biubiubiu0706的博客-CSDN博客 AJAX请求相关的代码都是类似的&#xff0c;有很多重复的代码&#xff0c;这些重复的代码能不能不写&#xff0c;能不能封装一个工具类。要发送ajax请求的话&#xff0c;就直接调用这个工具类中的相关函数即可。 用J…
阅读更多...
springboot web 增加不存在的url返回200状态码 vue 打包设置

springboot web 增加不存在的url返回200状态码 vue 打包设置

spring boot项目增加 html web页面访问 1. 首先 application.properties 文件中增加配置&#xff0c;指定静态资源目录&#xff08;包括html的存放&#xff09; spring.resources.static-locationsclasspath:/webapp/,classpath:/webapp/static/ 2. 项目目录 3. 如果有实现 …
阅读更多...
Arm 架构 Ubuntu 使用 Docker 安装 Gitlab 并使用

Arm 架构 Ubuntu 使用 Docker 安装 Gitlab 并使用

官方 gitlab 文档 我的系统是 arm 架构的 ubuntu 官网没有提供 arm 架构的 docker 的 gitlab 的安装方式&#xff0c;直接安装的也是后来加的&#xff0c;文档也是随笔带过&#xff0c;&#xff0c;&#xff0c;我用到了&#xff0c;记录一下 默认已经安装了 docker 在 docker …
阅读更多...
爬虫逆向实战(31)-某花顺行情中心(cookie、补环境)

爬虫逆向实战(31)-某花顺行情中心(cookie、补环境)

一、数据接口分析 主页地址&#xff1a;某花顺 1、抓包 通过抓包可以发现数据接口是/page/2/ajax/1/ 2、判断是否有加密参数 请求参数是否加密&#xff1f; 无请求头是否加密&#xff1f; 通过查看“标头”可以发现有一个Hexin-V加密参数&#xff0c;但是这个参数的值与c…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发