ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue常用指令

2022-09-16 16:32:16  阅读:256  来源: 互联网

标签:常用 vue 渲染 标签 绑定 指令 key 元素


指令的六大类

内容渲染指令

属性绑定指令

事件绑定指令

双向绑定指令

条件渲染指令

列表渲染指令

内容绑定指令

1. v-text文本指令

使用方法:

 

 

 

 内容 'zhangsan' 就展示在p标签里

如果p标签原来有内容就会被 'zhangsan'覆盖掉

2. {{ }}插值表达式

使用方法:

 

 

 

 

 

 在{{ }}里写数据名字,在data相应的名字里的数据就渲染到标签里了

3.v-html指令

使用方法:

 

 

 

 

 

 像这种带样式的标签只需要使用v-html的指令就可以实现(插值表达式和v-text都满足不了)

 

属性绑定指令

v-bind单项绑定

使用方法

 

 

 

 

 

 在元素属性的属性值直接写数据的名字是不可以渲染数据的

需要在属性上添加v-bind:单项属性绑定

 

 

 

简写( : )英文的引号

 

事件绑定指令

v-on:click点击指令

使用方法

 

 

 

 

 

 点击按钮加一 在p标签里的插值就加一

v-on可以简写为 @。

 

事件修饰符

 

 

 使用方法

 

 

当前点击a标签就不会跳转

 修饰符使用的时候是把 .preven写在指令后面

按键修饰符

 

 

 

 

 

 @keyup.esc="clearInput" :当按下esc键时输入框内容清空,并在控制台输出(触发了clearInput方法).

 @keyup.enter="commitAjax" :当按下enter时控制台输出(触发了commitAjax方法)

 

双向绑定指令

v-mode双向绑定指令

常用的元素

1.input输入框

2.textarea多行文本框

3.select下拉菜单

  示例1

 

 

 

 

 

 v-model修改文本框时p标签改变数据源也会改;v-bind修改文本框时不能修改数据源只会修改自己

  示例2

 

 

 

 

 

 给外部的select加v-model 下拉菜单数据源数字是'2'那么点开页面时他就会自动选择上海

v-model指令的修饰符

 

 

 

示例:number

 

 

 

 

 

 在v-model后面.number输入到文本框或者数据源的'数字'就只能是数字

 

条件渲染指令

v-if和v-show的区别

 

 

 

 如果flag为true被控制的元素就显示反之就不显示

v-if每次都会动态的移除元素和动态创建元素,来实现元素的显示和隐藏

v-show使用的是display:none样式,来实现元素的显示和隐藏

如果频繁的切换元素的显示状态,用v-show更好一些

如果刚进入页面的时候,默认元素不需要被展示,而且后期这个元素也可能不需要被展示出来用v-if 性能更好

在实际开发时,绝大多数情况,不需要考虑性能问题,直接使用v-if就行。

条件渲染v-if  v-else-if

 

 

 

 type为A时显示优秀

 

列表渲染指令

v-for指令

 

 

 

 

 

 item是可以随便起的名字 插值括号里的名字和data里的数据名字是对应的

强调key在v-for中的注意点

 

 

 

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

key的值必须具有唯一性(重复会报错)

建议拿id当做是key 因为id具有唯一性

使用index的值当做key的值是没有意义的因为index不具有唯一性

建议使用v-for指令时一定要制定key的值既可以提高性能、又防止列表状态紊乱

 

标签:常用,vue,渲染,标签,绑定,指令,key,元素
来源: https://www.cnblogs.com/0722tian/p/16699957.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有