首页 > 其他分享 >Vue 常用的指令都有哪些?

Vue 常用的指令都有哪些?

时间:2023-12-03 17:25:29浏览次数:40  
标签:Vue 哪些 标签 绑定 ng isred 指令 angular red

1、v-model 多用于表单元素实现双向数据绑定(同 angular 中的 ng-model)
2、v-for 格式:v-for="字段名 in(of) 数组 json" 循环数组或 json(同 angular 中的 ng-repeat), 需要注意从 vue2 开始取消了$index
3、v-show 显示内容 (同 angular 中的 ng-show)
4、v-hide 隐藏内容(同 angular 中的 ng-hide)
5、v-if 显示与隐藏 (dom 元素的删除添加 同 angular 中的 ng-if 默认值为 false)v-else-if必须和 v-if 连用 v-else 必须和 v-if 连用 不能单独使用 否则报错 模板编译错误
6、v-bind 动态绑定 作用: 及时对页面的数据进行更改
7、v-on:click 给标签绑定函数,可以缩写为@,例如绑定一个点击函数 函数必须写在methods 里面
8、v-text 解析文本
9、v-html 解析 html 标签
10、v-bind:class 三种绑定方法 1、对象型 {red:isred} 2、三元型 isred?"red":"blue" 3、数组型 [{red:"isred"},{blue:"isblue"}]
11、v-once 进入页面时 只渲染一次 不在进行渲染
12、v-cloak 防止闪烁
13、v-pre 把标签内部的元素原位输出

标签:Vue,哪些,标签,绑定,ng,isred,指令,angular,red
From: https://www.cnblogs.com/yuhuo123/p/17873420.html

相关文章

  • Vue3 读取Hdr 文件转Image显示
    import{decodeRGBE}from'@derschmale/io-rgbe';//引入io-rgbe//读取Hdr文件constReadHdrFile=(buffer:ArrayBufferLike&{BYTES_PER_ELEMENT?:undefined;})=>{consthdri=decodeRGBE(newDataView(buffer))constdata=hdri.data;......
  • VUE四个生命阶段和8个钩子函数的执行及其实现效果------VUE框架
    VUE四个生命阶段和8个钩子函数的执行及其实现效果<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>D......
  • 探乎站长论坛还有哪些原创内容创作方面的措施?
    探乎站长论坛为了鼓励和促进原创内容的创作,采取了以下措施:提供创作灵感:探乎站长论坛提供了大量的行业资讯、技术教程和经验分享,这些内容不仅可以帮助用户了解最新的行业动态和趋势,还可以为用户提供创作灵感。举办征文比赛:探乎站长论坛会定期举办一些征文比赛,鼓励用户创作高质量......
  • 图形渲染ISA指令集分析
    图形渲染ISA指令集分析1ISA定义就像任何语言都有有限的单词一样,处理器可以支持的基本指令/基本命令的数量也必须是有限的,这组指令通常称为指令集(instructionset),基本指令的一些示例是加法、减法、乘法、逻辑或和逻辑非。请注意,每条指令需要处理一组变量和常量,最后将结果保存在......
  • (自用)基于unity的指令(命令)模式
    指令模式1.配置输入 所有游戏中都包含玩家输入指令的部分(这些部分通常写在游戏循环中如unity中的UpData())游戏会每一帧都进行一次读取,当玩家按下相应按键时则会进行对应方法 为了可以时刻检测并记录玩家进行的操作,或者对某个对应的操作的指令进行更改,我们需要将这些......
  • Ant Design Vue2表单验证失效、select下拉框验证失效
    简述AntDesignVue2表单验证失效、表单校验三个下拉框,级联联动,动态赋值,第一项changge之后2,3需要=null或者='',但是发现明明第二个select已经选择了而且this.form.b不是空为啥还是校验不通过前情提示系统:一说部分截图、链接等因过期、更换域名、MD语法等可能不显示,可联系反馈(备注......
  • Ant Design Vue2表单验证失效、select下拉框验证失效
    简述AntDesignVue2表单验证失效、表单校验三个下拉框,级联联动,动态赋值,第一项changge之后2,3需要=null或者='',但是发现明明第二个select已经选择了而且this.form.b不是空为啥还是校验不通过前情提示系统:一说部分截图、链接等因过期、更换域名、MD语法等可能不显示,可联系反馈(备注......
  • [Vue] vue学习笔记(5): 过滤器
    关于过滤器注册过滤器:Vue.filter(name,callback)或newVue({filters:{...}})使用过滤器:{{xxx|filter_name}}或v-bind:www="xxx|filter_name"过滤器可以接受除过滤对象以外的其他参数,也可以多个过滤器串联过滤器不会改变原本的数据,而是产生新的数据示例以将js时......
  • [Vue] 案例:收集表单数据
    创建一个表单,利用vue完成所有逻辑准备一个容器<divid="root"> <!---@submit指定提交行为,prevent阻止默认的刷新页面行为---> <[email protected]="submitForm"> username:<inputtype="text"v-model="userInfo.username"><b......
  • vue实现请再次输入密码的表单校验
    1、获取第一次输入的密码的值2、比较两次密码的值是否相等3、如果不一致返回错误信息this.userInfo.password2:获取第一次输入的密码;value当前校验值;validator自定义校验规则;constConfirmPassword=(rule,value,callback)=>{if(value!==this.userInfo.password2){......