vue常用

发表于 | 更新于 | 阅读次数 1
vue常用的一些处理

动态class:

1
2
3
4
5
// 通过变量控制class:（列表和单个时有不同）
:class="{ 'redpacket-para-margin' : model.redpackets.logo_url }"
:class=" model.redpackets.logo_url ? 'redpacket-para-margin' : '' "
:class=" !model.redpackets.logo_url ||  'redpacket-para-margin'  "
:class=" model.redpackets.logo_url && 'redpacket-para-margin' "

动态src:

1
2
3
4
5
6
7
// 对于template里面动态图片:src需要使用默认的图片,需将该本地图片资源从assets移动外一级static中,使用./static/*.png即可

// 有则使用，无则使用默认
:src="model.redpackets.background_url || '/static/img/auto-bg.png'"

// 有则使用，无则隐藏
:src="model.redpackets.watermark_url" v-show="model.redpackets.watermark_url"

输入框有则禁止输入

1
document.querySelector('.phone').readOnly = !!this.model.phone

写法

除date、ready是()外，其余均带：

1
2
3
4
5
6
7
8
9
10
export default {
  data () {
    return Object.assign({}, {
    })
  },
  components: {}，
  ready () {},
  computed : {},
  methods : {}   
}

拼接链接

1
2
3
4
5
6
7
8
linkHref () { // 跳转地址
  return [
    '/secret_reward?token=' + (this.model.token || ''),
    'packet_id=' + (this.model.packet_id || ''),
    'receiver_account_id=' + (this.model.receiver_account_id || ''),
    'grant=' + (this.grant || '')
  ].join('&')
}