vue之v指令

【‘# V指令(本地应用)
指令的本质就是自定义属性,只是有固定的格式

内容绑定,事件绑定

v-text

设置标签是文本值(textContent),效果跟差值表达式{{}}差不多
在这里插入图片描述

v-html

设置标签的innerHTML

在这里插入图片描述

v-on

为元素绑定事件

:click 鼠标点击时间
:monseenter 鼠标移入事件
:dblclick 鼠标双击事件
在这里插入图片描述
v-on: 可写成@
比如:@click

传递自定义参数

在这里插入图片描述

事件修饰符

@keyup 键盘事件
在这里插入图片描述
.enter 遇到回车键触发事件

显示切换,属性绑定

v-show

根据表达式的真(显示)假(隐藏),切换元素的显示和隐藏
原理是修改元素的display,指令后面的值最终会解析成布尔值
在这里插入图片描述

v-if

根据表达式的真(显示)假(隐藏),切换元素的显示和隐藏(操作dom元素)
在这里插入图片描述

v-bind

设置元素的属性
在这里插入图片描述
v-bind:属性可以直接写 :属性,省略v-bind

列表循环,表单元素绑定

v-for

根据数据生成列表结构,语法是(item,index)in 数据(结合数组使用)
在这里插入图片描述
in是关键字,不可更改
在这里插入图片描述

v-model

获取和设置表单元素的值(双向数据绑定),同步更新
在这里插入图片描述

v-clock

  • 解决差值表达式存在的“闪动”问题
  • 解决原理:
    • 提供样式
    [v-clock]{
    		display:none;
    }
    
    • 先通过样式隐藏内容,然后在内存中进行值的替换,替换好值后再显示最终的值
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值