做磁力搜索网站好吗,qq空间网站,网站图片设计效果图,wordpress主题付费数组监测处理方法 VUE 提供了关于数组处理的直接方法#xff0c;但并非全部都是可以处理的 如下可以直接处理#xff1a; .push --向数组中增加 .pop --从数组中最后减去一个元素 .shift --从数组中第一个减去一个元素 .unshift --在数组中的头部添加一个元素 .splice --自定…数组监测处理方法 VUE 提供了关于数组处理的直接方法但并非全部都是可以处理的 如下可以直接处理 .push --向数组中增加 .pop --从数组中最后减去一个元素 .shift --从数组中第一个减去一个元素 .unshift --在数组中的头部添加一个元素 .splice --自定义删除 元素 .sort --元素排序 .reverse --元素排序互换 如下不可以需要获取后再重新赋值 .concat --数组合并 .filter --过滤数组 .slice --根据条件获取一个新数组 示例
templatedivp v-foritem in numList :keyitem {{item}}/pbutton clickaddadd/buttonbutton clickadd2add2/button/div
/templatescriptexport default {data(){return{num:0,numList:[1,2,3,4,5]}},methods:{add(){this.numList.push(6);},add2(){//this.numList.concat([7]) //无法直接绑定this.numList this.numList.concat([7])//需要如此处理才可以}}}
/script
计算属性与自定义函数 计算属性与函数事件都可以达到相同的目标但是计算属性则是执行一次而函数每次调用都会执行所以场景不同采取方式也不同。 示例代码
templatediv!-- 直接使用计算属性调用只调用一次 --p{{computeIsOK}}/p!-- 但是方法则每次调用都会计算 --p{{changeIsOk()}}/p/div
/templatescriptexport default {data(){return{msg:test,numList:[1,2,3,4,5,6,7,8,9,10],isOk:true}},computed:{computeIsOK(){return this.isOk ? ok : no}},methods:{changeIsOk(){return this.isOk ? ok : no}}}
/script
Class 与Style绑定 无论是绑定Class 还是绑定Style尽管可以通过字符串的方式定义与通过数组进行定义但还是推荐通过绑定对象进行实现.但Style 权重太高所以一般情况下都是绑定Class 实现内联样式。 绑定Style 示例
templatedivp :styleclassDemo{{ msg }}/p/div
/templatescriptexport default {data(){return{msg:hello world,classDemo:{active:true,text-danger:true,color:red,font-size:40px}}}}
/script
绑定Class 示例 依赖Style
templatedivp :classclassDemo{{ msg }}/p/div
/templatescriptexport default {data(){return{msg:hello world,classDemo:{active:true}}}}
/script
style.active{color: red;font-size: 40px;}
/style
