精华内容
下载资源
问答
  • Vue 使用slice 进行分段渲染

    千次阅读 2020-04-01 10:46:37
    目前遇到一些特别的需求,某个组件在一个div要渲染4个,循环渲染几个这样的div,但是给出来的数据是一组的,数量随机,所以只能用slice分割数组去渲染 在creaded里面设置好改数组的长度,保存下来,记得要用math....

    目前遇到一些特别的需求,某个组件在一个div要渲染4个,循环渲染几个这样的div,但是给出来的数据是一组的,数量随机,所以只能用slice分割数组去渲染

    在这里插入图片描述
    在creaded里面设置好改数组的长度,保存下来,记得要用math.ceil除法,意思是进1,列如5/4 = 2
    在这里插入图片描述
    这渲染的时候,数据绑定给子组件的时候就使用slice分组数据放入,
    渲染的次数是根据该数组的长度。

    展开全文
  • 在设计过程中进行切割和切片无疑是耗时的工作。 此外,当您必须以不同比例切割和切片数百个图层时,它变得... Cut&Slice Me是Photoshop的扩展程序,用于简化剪切和切片设计的过程 。 然后,您可以为iPhone,Andr...

    在设计过程中进行切割和切片无疑是费时的工作。 此外,当您必须以不同比例切割和切片数百个图层时,它变得越来越复杂。

    当然,在photoshop中可以进行复制合并,将图层导出到文件切片功能。 但是这些方法在加快剪切和切片过程中没有多大帮助。 您需要的是一个插件。

    Cut&Slice Me是Photoshop的扩展程序,用于简化剪切和切片设计的过程 然后,您可以为iPhone,Android或桌面设备导出图层。 导出的文件也具有各种比例和分辨率,例如iPhone或HDPI的视网膜,Android的LDPI,MDPI和XHDPI。

    剪切并切片我安装

    要使用Cut&Slice Me插件,您至少需要在计算机上安装Adobe Photoshop CS6 / CC 下载插件 (以及稍后将要使用的示例PSD文件)。

    下载完成后, 双击CutAndSliceMe.zxp文件 ,安装将由Adobe Extension Manager自动开始。 按照说明进行操作,然后重新启动您的Photoshop(如果已打开)。

    要使插件在您的Photoshop右侧面板中可见,只需转到窗口>扩展>剪切并切片我

    入门

    Cut&Slice Me易于使用,但您必须首先做一些工作,以确保插件在切割和切片时有效地工作。

    首先,您必须将图层对象组织到文件夹中,因为Cut&Slice Me仅检查组名称。 您还需要要导出的图层组名称的末尾添加“ @”符号

    切片定义的大小

    在导出过程中将删除所有不必要的透明像素。 要将导出的文件保持在所需的大小,请执行以下操作:

    1.确保已在 编辑”>“首选项”>“常规 ”中选中“捕捉矢量工具和转换为像素网格”设置。

    2.然后,为所需大小创建一个矩形矢量层。

    3.将此形状放在组的最顶端,这样它将告诉插件您要导出的区域大小。最后,将形状命名为“#”

    不同的国有资产

    处理通常具有不同状态的按钮时,可以使用特殊的方法。

    1.在导出按钮时,为按钮创建一个新的图层组,并在其名称中包含“ _BTN”标签

    2.在组按钮内,创建另一个包含按钮状态的组,并根据状态命名它们 组状态名称应如下所示:

    • 正常
    • 徘徊
    • 点击/按下
    • 已选
    • 残障人士

    除了按钮之外,此规则还可应用于状态可能不同的其他元素例如以下屏幕截图。

    使用Cut&Slice Me

    现在,让我们看看Cut @ Slice Me如何帮助您进行设计。 如前所述,我们将使用Cut&Slice Me主页上的 PSD设计文件示例。

    如前所述,当前的Cut&Slice Me可让您导出到iPhone,AndroidWeb 您可以选择切片所有资产,子组或选定的图层。 将示例设计切片并导出到iPhone。

    导出过程完成后,您将发现结果文件位于原始PSD文件位置 (参见图片)。

    到目前为止,我假设您对插件的工作原理已有扎实的了解。 因此,让我们尝试将插件与其他设计一起使用。

    使用Elemis Freebies的 Webpaint模板 ,您将了解如何从头开始设置插件规则

    为简单起见, 我们仅将设计的一半用于导出。 以下屏幕快照比较了在准备使用之前和之后各层的结构。

    左侧(红色)是原始图层。 重新排列并重命名图层的状态后,我们到达右侧的内容(蓝色)。

    由于设计模板将用于网络,因此在插件面板中,选择桌面的设备模式(显示器 图标)。 击中切下所有资产

    现在,已定义的资产已成功切片,就像这样。

    请注意,如果您要分割自己的设计,则需要以最高分辨率进行设计,因为最终图像是针对Android中的xhdpi和Apple设备中的视网膜 该插件执行设计的完整分辨率,然后按比例缩小以导出为不同大小

    结论

    使用此Photoshop插件进行剪切和切片时,不会浪费任何时间。 通过对层组织进行更多的规范,即使是复杂的设计也可以精确而轻松地切分。


    翻译自: https://www.hongkiat.com/blog/cutslice-me-photoshop/

    展开全文
  • vue的data以及js的slice

    千次阅读 2018-12-08 21:49:22
    <template> <div> <h2>devicebase 页面&...添加1 slice用法</button><br> <span v-for="item in list&qu
    
    
    <template>
      <div>
        <h2>devicebase 页面</h2>
        <button @click="addSlice">添加1 slice用法</button><br>
        <span v-for="item in list" :key="item.id">{{item}}</span>
        <br>
        <button @click="test">test</button>
        <br>
        <button @click="addSet">添加2 this.$set用法</button><br>
        <span v-for="item in listSet" :key="item.id">{{item}}</span>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          list: [{
            a: '1'
          }, {
            b: '2'
          }],
          listSet: [{
            a1: '1'
          }, {
            b1: '2'
          }]
        }
      },
      methods: {
        addSlice () {
          console.log('触发:add事件')
          console.log(this.list[0])
          console.log(this.list[1])
          // let group = []
          // let group = this.list
          let group = this.list.slice(0) // slice(0)的意思是把vue中data下list特殊格式(属于vue的数据格式)给转换为js正常的数据格式
          let obj = { c: '3' }
          group[2] = obj
          this.list[2] = obj // 数组不可以直接添加对象,必须新建一个数组   this is an error understand
          console.log(this.list[2])
          this.list = group
        },
        test () {
          console.log('触发:test事件')
          let list = [{
                a: '1'
              }, {
                b: '2'
              }]
          let obj = { c: '3' }
          list[2] = obj // list数组写在js中是可以直接list[i]添加对象的,data中list: 是不可以的,受vue中data的影响,可以this.$set,也可以this.list=group准确的说是data中的数据格式是vue专属的,和js中数组格式不一样.
          console.log(list)
        },
        addSet () {
          console.log('触发:addSet事件')
          let group = {}
          group.c1 = '3' 
          this.$set(this.listSet, this.listSet.length, group)
          this.$set(this.list, this.list.length, group)
        }
      }
    }
    </script>

     

     

    Q:在vue中不能直接对data定义的list数组添加元素,解决方法有两种?

    1.用Vue专门针对此bug设定的方法,this.$set 或者是 Vue.set(需当前页面impprt Vue from 'vue')

    2.在script中先手动将list转化为js数组数据格式,this.list.clice(0),之后用js的方法即可

     

    附注:slice(0)的深入理解

    深拷贝和slice(0)有什么区别

    Q:var array = listenerArray.slice(0); 和深拷贝有什么区别呢?还有Object.assign() 请做一个区分吧

    深拷贝:拷贝地址和拷贝原对象的属性树,这样拷贝和原对象就是完全独立的了,所以更改'副本'不能更改原对象,这涉及到引用类型和基本类型的概念

    浅拷贝:类似于引用类型,只拷贝地址,可以通过"副本"来修改原对象

     

    .js的传参是按值传递。但是对于引用类型,传递的值是原对象在内存中的地址,所以拷贝仅仅是获取了原对象的引用,对拷贝进行修改,原对象也会被修改,要想避免这种情况出现,就不能仅仅拷贝地址,而是要将原对象的属性树遍历复制到拷贝上,这样拷贝和原对象就是完全独立的了,这就是要达到深拷贝的层次,之前就叫浅拷贝的层次

    如果所有值都是非引用类型,那么深浅拷贝没有差别

    slice可看作浅拷贝,因为如果listenerArray有引用类型的元素的话,slice仅仅是复制了元素的地址,而深拷贝是复制了整个元素

    ar fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

    var citrus = fruits.slice(1,3);

    修改citrus数组里的值,并不会改变fruits,这不就是深克隆吗?

    对于元素全部为基础类型的数组,slice等价于深克隆。对于含有引用类型元素的数组则不然

    展开全文
  • [Vue warn]: Error in render: "TypeError: item.slice is not a function" 2. 原代码写法如下,紫框中的代码可以正常运行,但红框中的代码报错 3. 原因:slice 方法是作用于数组的方法。 bodyInfoList 是一...

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到教程。

    1. 双重循环中使用 slice方法,报错:

    [Vue warn]: Error in render: "TypeError: item.slice is not a function"

    2. 原代码写法如下,紫框中的代码可以正常运行,但红框中的代码报错

    3. 原因:slice 方法是作用于数组的方法。 

    bodyInfoList 是一个数组结构,但 item  是对象结构,故报错。

    我的数据结构:

    4. 解决: 要么不用这个方法 ,要么把 bodyInfoList 改成 2 维数组,方可用 slice  方法解析 。

     

    展开全文
  • 变更方法(改变原数组) push pop shift unshift splice ...filter concat slice vue2不支持vue3支持的 this. data[0]=123;//在vue3中会重新渲染 对象中新增一个属性 this. obj.name=‘MySQL’;//在vue3中会重新渲染 ...
  • 我们知道 vue是双向数据绑定,在数据层发生变化时,会渲染到指定的dom层,完成一次修改。 但是有些表面现象的变化,未必会使数据层监听到。 比如以下两种代码 // 第一种 export function shuffle(arr) { let _...
  • vue

    2016-12-06 17:52:08
    自定义过滤器 Vue.filter('uppercase', function(value) {  if (!value) { return ''}  value = value.... return value.toUpperCase() + value.slice(1) }) Vue.filter('re',function(value){
  • vue
  • JavaScript为操作已经包含在数组中的项...今天学习操作数组的其他方法:concat()、slice()和splice()。concat()方法concat()方法可以简单的将其理解为合并数组。基于当前数组中的所有项创建一个新数组。简单的说,c...
  • Vue 页面绑值后截取字符串 一、substring() substring()方法返回一个索引和另一个索引之间的字符串 以下是一些示例代码: var str = 'abcdefghij'; console.log('(1, 2): ' + str.substring(1, 2)); // '(1, 2): b' ...
  • 1、slice(start,end)===>数组、字符串 可以截取数组和字符串, 左闭右开 不会影响原数组 截取字符串 <script> var s = 'hello' //slice()截取字符串 var t = s.slice(0, 3) console.log(t); </...
  • [Vue warn]: Error in render: "TypeError: Cannot read property ‘slice’ of undefined&q… 在页面中使用slice, 页面报错,报错原因 是由于数组对象未定义或为null 引起的,所以查看获取数据的接口是否请求到...
  • 在页面中使用slice, 页面报错,报错原因 是由于数组对象未定义或为null 引起的,所以查看获取数据的接口是否请求到了数据。 因为加载顺序(生命周期)的问题导致先执行的时候为空,做个空数据就好了(typeIdPro....
  • js中有三个截取字符的方法,分别是substring()、substr()、slice(),平时我们可能都用到过,但总是会对这些方法有点混淆,特别是substring()和substr(),连方法名都差不多,下面就具体来看一下区别。相同点这三个...
  • Vue.filter( id, [definition] ) 参考:vue 过滤器filter(全面) ... 全局指令 ...Vue.filter('capitalize', function (value) { ... return value.charAt(0).toUpperCase() + value.slice(1) }) new Vue({ // ... }).
  • Vue过滤器

    千次阅读 2020-11-02 19:43:53
    Vue过滤器 自定义过滤器 // 首字母大写 Vue.filter("upper", function(val){ return val.charAt(0).toUpperCase() + val.slice(1) }) // 首字母小写 Vue.filter("lower", function(val){ return val.charAt(0)....
  • vue杂记

    2018-11-05 17:55:00
    Vue数据驱动(主要操作的是数据) 数据类型 number string boolean object null undefined Function symbol(es6) 前后台交互一般处理 对象{} 数组[] 操作数组的方法(括号中的能改变原数组,数组变异) ES4 (pop ...
  • 文章目录 列表 V:for 最简单的循环 列表“就地更新” count 循环 变异方法:在原有数组基础上操作 push:从尾端插入 splice(index, length, [replace items] 替换:返回新的数组 concat slice filter 列表 V:for 最...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 558
精华内容 223
关键字:

slicevue

vue 订阅