关闭

vue实用的计算属性小技巧

时间: 2020-11-08阅读: 95标签: 属性

小技巧一

我们时常会碰到后端要“开始时间” - “结束时间”(分为两个变量存放),但是呢!我们使用的时间选择器的组件又只能绑定一个数组,这个时候,我们传给后端的时候需要将数组拆散,然后回显的时候又要拼接在一起,工作量不大,但是多了很多代码,也多加了一些变量。那有没有更好的办法呢!!!

<el-date-picker
   v-model="receiveDate"
   type="datetimerange"
   value-format="timestamp"
   range-separator="至" 
   placeholder="领取时间"
   start-placeholder="开始时间"
   end-placeholder="结束时间">
</el-date-picker>

我们把receiveDate这个值变为计算属性,然后用计算属性get/set写法

receiveDate: {
      get: function () {
        return this.form.rSTime && this.form.rETime ? [this.form.rSTime,this.form.rETime] : "";
      },
      set: function (newVal) {
        let [rSTime, rETime] = newVal || [null, null];
        this.form.rSTime = rSTime;
        this.form.rETime = rETime;
      }
}
这里如果需要校验的话的,直接可以只校验前部分rSTime就可以了,而且校验方法还是一样的

小技巧二

在开发中还会有一种情况,也可以使用计算属性更优雅的解决

是否限制:●否 ○是 【input】

这种呢,后台往往不需要这个Boolean值,我们就需要多定义一个变量(X)来接收,切换选项的时候还需要添加方法设置input的值为特殊值。 主要是在回显的时候需要判断是否有input值再判断是否需要设置多出的变量(X)为true,或者false。有没有方便的方法呢?

<el-radio-group v-model="hasLimit" >
    <el-radio :label="false">不限</el-radio>
    <el-radio :label="true">
    	限制
        <el-form-item v-if="hasLimit" prop="limit">
           <el-input v-model="form.limit" />
        </el-form-item>
   </el-radio>
</el-radio-group>
hasLimit:{
   get(){
      return this.form.limit !== -1;
   },
   set(newVal){
      this.form.limit = newVal ? '' : -1
   }
}

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/10150

JS、Jquery中判断checkbox是否选中

attr()与prop()如何选择:attr()方法返回被选元素的属性值。prop() 方法设置或返回被选元素的属性和值。当该方法用于返回属性值时,则返回第一个匹配元素的值。当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。

HTML5中的lang属性,zh-CN还是zh-Hans?

language:主语言,用代码“zh”表示汉语,小写。好像对于大小写没有强制要求,习惯而已。还是遵循习惯吧,总让别人看着别扭不是彰显个性的好办法

Vue之计算属性

模板内的表达式通常用于简单的运算,当其过长或逻辑复复杂时,会变得难以维护,在Vue应用中,在模板中双向绑定一些数据或者表达式,但是表达式如果过长,或者逻辑更为复杂时

CSS3中box-shadow属性

box-shadow属性是一个CSS3属性,允许我们在几乎任何元素上来创建阴影效果,类似于在设计软件中的”drop shadow”。这些阴影效果允许我们在原本平面的、二维的页面上面创建出深度(第三维)的错觉。

HTML 标签的 for 属性

for 属性规定 label 与哪个表单元素绑定。隐式和显式的联系label通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式

常用的CSS属性

页面渲染时,dom元素所采用的 布局模型,可以通过 box-sizing 进行设置,根据计算高度的区域可分为:content-box (W3C 标准盒模型),border-box (IE盒模型)

如何判断一个对象的某个属性是可写的?

这是一个咋一听好像很简单,但是实际上却没那么简单,而且是很有趣的问题。我们先来看一下什么情况下一个对象的属性是可写的。属性可写,是指满足如下条件:

H5中data-*容易忽略的问题

H5添加了data-*属性,非常方便。但经常忽略小写的问题, H5要求属性名全部小写,驼峰式命名的习惯掉坑了,alert出来的值出乎意料,通过data()方法获取所有data值后可以看到如下结果

css calc()有啥用?

CSS3的calc() 函数用于动态计算长度值。calc()函数允许我们在属性值中执行数学操作。例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。

属性设置百分比时的计算参考汇总

元素宽高width,min-width,max-width等元素宽度设置百分比,以包含块的宽度为标准进行计算;height,min-height,max-height等元素宽度设置百分比,以包含块的高度为标准进行计算;

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!