建设厅职业资格中心网站揭阳seo快速排名
指令
v-show:展示和隐藏 如图片的展示和隐藏 (底层是其实已经创建了 加了个css属性,display = none)
v-if:创建和删除 创建和删除,删除就真的没了
v-for: 遍历指令 v-for="item in list" 或 = "(item,index) in list" 还可以显示索引 如for循环中需要删除某行,就需要Index进行传参,in和of完全一样,如果遍历对象,结构是(value,key) in Object
还可以,遍历常量,item in 10 输出结果为 1/2/3....10
v-bind:动态绑定一个指令 ,如 v-bind:isShow 可以直接省略为 :isShow b-bind可以用:替代
v-on:绑定事件:如v-on:click:方法名() 可以简写为@:click 可以将v-on替换为@
v-model:双向绑定表单 只要属性值改变,输入框的值也会改变,相反一样
v-html:解析文本,{{}}中默认解析为普通文本,就是普通的字符串,防止第三方传来的数据有问题,使用v-html进行解析,如<b>加粗的</b> 需要注意XSS攻击问题
==:比较的是两边变量的值
===:比较的是两边的类型和值
template:包装元素,不会破坏项目结构,不像div会在外面套一层
key:跟踪每个节点的身份,重用和排序现有元素,理想Key是每项都有的且唯一的id
事件
@click:点击事件
@click.self:点自己本身才会触发,点内部事件不会触发
@click.stop:阻止事件向外传播
@click.once:只可以执行一次
@click.prevent:阻止默认行为
@input:输入框事件,失去焦点等
调用方法时不传参数,可以通过传入系统参数evt.target 可以获取事件源,如evt.target.valu0e
@keyup:按键相关,抬起触发
@keyup.enter:抬起回车触发
属性
href:超链接,跳转
常用方法
includes("a"):arr.filter(item => item.includes("aa")) 包含a的~
数组更新检测
- 使用以下方法操作数组,可以检测变动,这类方法可以vue调用完会自动刷新页面数据
push() pop() shift() unshift() splice() sort() reverse()
- 这类方法需要使用新数组替换原数组来使页面刷新
filter(),concat()和slice() ,map() 对于原数组没有任何影响,页面不会变动
- list[0] = 1 ,此时数组确实被修改了,但是页面数据没有被刷新
- Vue2中使用Vue.set(datalist,1,"aa"),将datalist数组中的1替换为aa,页面同步展示,或者使用datalist.splice(0,1,"aa")
模糊查询
v-model = datalist v-for="item in test()"
test(){
return datalist.filter(item => item.includes("aa"))
}