mpvue 全局变量在HTML模板<template> 的应用

honey缘木鱼

发布于 2019-03-15 16:30:01

2.1K0

发布于 2019-03-15 16:30:01

文章被收录于专栏：娱乐心理测试

我们在开发项目时，经常用到的就是全局变量，在vue.js项目中，只要在main.js设置好全局变量后，在所有的页面方法和模板中都可以引用，把vue.js项目中的代码直接拷贝到mpvue时，发现在模板中不可用，下面解决方案：

(1).main.js设置的全局变量

Vue.prototype.$headerImg ='https://yjmall.oss-cn-qingdao.aliyuncs.com/'
Vue.prototype.$smallImg ='?x-oss-process=style/xx-compress'

(2).在Vue页面模板中使用(不可行)

<template>
<div  class="bgView">
  <img v-bind:src="$headerImg+item.displayPicture+$smallImg"/>
</div>
</template>

解决方案: (1).在data中设置变量，可直接使用

 <img v-bind:src="headerImg+item.displayPicture+smallImg"/>//直接使用

data () {
    return {
        results: [],
        headerImg: 'https://yjmall.oss-cn-qingdao.aliyuncs.com/',
        bigImg: '?x-oss-process=style/xx-compress',
        isTest: false,
    }
  }

(2).用computed属性

 <img v-bind:src="headerImg+item.displayPicture+bigImg"/>

computed: {
      headerImg() {
            return this.$middleImg
       },
       middleImg() {
           return this.$middleImg
        }

有些复杂的方法无法在template中直接写method，我们就可以用computed属性如上述方法这样，就可以直接使用了。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.03.04 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript