Vue指令 和 指令修饰符

news/2024/12/28 19:31:27/

v-html 

 

 v-show 和 v-if

v-show 底层原理:切换 css 的 display:none 来控制显示隐藏

v-if 底层原理:根据判断条件 控制元素创建 和 移除 (当为false 时,整个元素都隐藏起来了)

v-else 和 v-else-if

v-on 

v-on:事件名 = “内联语句” 

 v-on:事件名 = “methods中的函数名” 

 

 调用传参,原来是直接写函数名,如果想要传递参数,那么可以改为函数调用,也就是通过添加括号传递参数,methods中通过形参接收

注:methods中要访问 data 中的数据 ,用 this.属性

v-bind : 动态设置标签属性值

在标签属性中不能使用插值表达式

简写:v-bind 直接写为 : 

 

点击图片切换案例 

只有数组中图片下标大于0且小于数组长度减1 才会显示按钮,否则的话就隐藏,用 v-show 实现

 v-for指令

 

书架管理案例 

 

通过id 删除数组中的对应项

filter 不会改变原数组,需要将过滤后的数组赋值给原数组

v - for 中的 key

没加 key 会删除的是最后一个 li,然后将后面三个 li 中的内容移到前面三个来

 

 

v-model :表单双向数据绑定

数据变化,视图自动变化

可以快速获取和设置表单元素内容

 

 记事本案例

添加功能:

为按钮添加点击事件,点击按钮就 v- model 获取输入框中的内容

在数组中将 输入框中的内容 unshift 添加到数组前边

判断输入框是否为空,如果为空,弹提示,并且结束。不为空才会进行上述两个

最后将输入框内容添加到数组中之后,要将该绑定到输入框的 数据清空

底部统计: list.length

清空:this.list = [ ]

如果数组中没有数据,应该隐藏下面的 “合计” 和 “清空” 用 v-show 判断 list.length是否大于0

 

 

指令修饰符:

  1. 按键修饰符 
    @keyup.enter --> 键盘回车监听
  2. v -model 修饰符
    v - model.trim -->去除首尾空格
    v - model.number -->转数字 (但是输入abc这样没法转,直接原封不动)
  3. 事件修饰符
    @事件名.stop -->阻止冒泡
    @事件名.prevent --> 阻止默认行为

 如果想要是键盘回车时触发,是要判断 事件对象 e 对应的键盘标识符 key 

if (e.key === 'enter'){

console.log('键盘回车触发',this.username)
}

该段就是 @keyup = "fn"时的函数,要判断事件对象的键盘标识符

但是如果是 @keyup.enter = "fn" 的话,那就相当于省略了上面的判断

 

阻止冒泡:

分别给儿子和父亲盒子注册点击事件,只点击儿子盒子,但是因为儿子盒子在父亲盒子里,所以点击儿子盒子触发响应,父亲也被点击了

 

可以 e.stopPropagation() 阻止冒泡 相当于在在注册点击事件时 为事件加上 .stop

 

组织默认行为

例如 a 标签中注册点击事件,但是该点击事件后面居然没有内联语句或者是函数 

 


http://www.ppmy.cn/news/1558866.html

相关文章

w~视觉~3D~合集5

我自己的原文哦~ https://blog.51cto.com/whaosoft/12898983 #Neural Sewing Machine (NSM) Neural Sewing Machine (NSM),一种新颖的保持 3D 衣物结构的学习框架,可以有效表示多样化形状和拓扑结构的 3D 衣物,并应用于 3D 衣物表征&…

【Linux】Linux的基础工具

目录 1. 整体学习思维导图 2. 安装工具yum/apt 2.1 安装工具是什么? 2.2 理解安装的过程 3. Vim 编辑器的使用 3.1 vim的多模式 3.2 命令模式:快速编辑 3.3 替换模式 3.4 底行模式 3.5 视图模式 3.6 小技巧 4. gcc/g 5. 理解编译和库的基础…

当代体育科技杂志当代体育科技杂志社当代体育科技编辑部2024年第33期目录

运动人体科学 运动调控代谢综合征的机制研究 张征光;葛贝贝;陈英豪; 1-4 肥胖初中男生体力活动与静息能耗的计量关系 张卫东;乔云峰; 5-9 青少年乒乓球运动中肩部损伤的预防策略 张悦;王英建;黄春艳; 10-1293 运动训练学 青少年啦啦操专项体能训练策略研究 张爱…

IntelliJ Idea常用快捷键详解

文章目录 IntelliJ Idea常用快捷键详解一、引言二、文本编辑与导航1、文本编辑2、代码折叠与展开 三、运行和调试四、代码编辑1、代码补全 五、重构与优化1、重构 六、使用示例代码注释示例代码补全示例 七、总结 IntelliJ Idea常用快捷键详解 一、引言 在Java开发中&#xff…

如何计算相位差

如何计算相位差 假设我们有两个同频率的正弦信号: 这里两个信号的角频率w2πf是相同的,根据同频正弦信号相位差的计算方法,直接用两个信号的相位相减。 再来看利用波形图计算相位差的例子: 另一种计算方式:

定位方式:css

使用相对路径 div ul #div下的所有ul,空格表示相对路径(这个实际中用的多一些) 绝对路径-一般不用绝对路径 html>head>div,“>”表示根路径 使用class名称定位 使用.表示 使用id定位 使用#表示 使用属性定位 [属性名…

【RAG实战】语言模型基础

语言模型赋予了计算机理解和生成人类语言的能力。它结合了统计学原理和深度神经网络技术,通过对大量的样本数据进行复杂的概率分布分析来学习语言结构的内在模式和相关性。具体地,语言模型可根据上下文中已出现的词序列,使用概率推断来预测接…

XlDynamicFilterCriteria 枚举 (Excel)

在vba中使用Range.autoFilter时,第二个参数(条件criteria1)可以用以下参数。 文档链接:XlDynamicFilterCriteria 枚举 (Excel) | Microsoft ​​​​​​Office VBA 参考主题https://learn.microsoft.com/zh-cn/office/vba/api/ex…