其他分享
首页 > 其他分享> > vue常用指令

vue常用指令

作者:互联网

指令的六大类

内容渲染指令

属性绑定指令

事件绑定指令

双向绑定指令

条件渲染指令

列表渲染指令

内容绑定指令

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