在v-for中根据swtich按钮是否展示输入框、三种字符串截取方法的不同、字符串包含方法、根据后端返回值默认选中树形结构的值

225 阅读2分钟

1.在v-for中根据swtich按钮是否展示输入框 通过type以及change事件修改的是否显示预约订餐前的值(reserveShow)来判断是否显示隐藏,在change事件对数组进行for in键名循环,若数组内的键名与change事件修改的值一样,则将控制是否显示预约订餐前的值(reserveShow)改为true

效果:

图片.png

代码:

页面布局:

图片.png

数据: 图片.png

change事件 图片.png

弹窗打开回调事件 图片.png

2.三种字符串截取方法的不同(slice,subString,subStr)

(1)有两个参数,数值小的作为起点,数值大的作为终点

(2)Slice和subString由第一个参数为起点截取到第二个参数是提取结束的位置(即该位置之前的字符会被提取出来),对substr()而言,第二个参数 表示返回的字符串数量。

图片.png

(3)若值存在负值的情况下,当第一个参数为负值,slice()和substr()从后往前数,而subString()则是视为0。当第二个值为负数时,slice()将第一个负参数值当成字符串长度加上该值,subString()和 substr()则是视为0。

图片.png

图片.png

3.字符串包含方法:startsWith()、endsWith()和includes()

(1)第一个参数为需要搜索的字符串,第二参数为搜索位置

(2)第一个参数:startsWith搜索第一个位置的字符串,endsWith搜索最后一个位置的字符串,includes检查整个字符串

图片.png

(3)第二个参数:startsWith()和includes()方法接收可选的第二个参数,表示开始搜索的位置。如果传入第二个参数,则意味着这两个方法会从指定位置向着字符串末尾搜索,忽略该位置之前的所有字符。endsWith()方法接收可选的第二个参数,表示应该当作字符串末尾的位置。

![图片.png](p1-juejin.byteimg.com/tos-cn-i-k3… bpfcp/28f5ab4eff27483fa7d300d3d942ce46~tplv-k3u1fbpfcp-watermark.image?)

图片.png

4.根据后端返回值默认选中树形结构的值(使用递归)

代码部分:checkedKeys(默认选中的数组) key(修改成功后回显错误,key值需要变化)

图片.png

(1)首先通过递归获取树形结构内包括子树的所有id值(若有子树则继续递归)

图片.png

(2)根据后端返回值与递归获取的所有id值进行递归过滤

图片.png

(3)点击按钮进行回显

图片.png

效果:

图片.png