Vue动态绑定地址

Vue动态绑定

动态绑定大家应该都了解就是v-bind，简写：

• 简单的动态绑定url

//data.js中
const baseUrl = 'http://www.xxx.com';
const urls= [
      {
    
    
        url: `${
      
      baseUrl}/a.png`,
      },
      {
    
    
        url: `${
      
      baseUrl}/b.png`,
      },
      {
    
    
        url: `${
      
      baseUrl}/c.png`,
      },
    ],

//先把data.js导入
//vue的template中代码
<div v-for="(item, index) in urls" :key="index" >
   <img :src="item.url" />
</div>

• 简单的绑定加字符串拼接

//vue的data中代码
data(){
    
    
	return{
    
    
		baseUrl:'http://www.xxx.com',
	}
}

//vue的template中代码
<div>
  <img :src="baseUrl+'/banner.png'" width="100%" />
</div>

• 再或者是

//vue的methods中代码
  methods: {
    
    
    getUrl(url) {
    
    
      const baseUrl = 'http://www.xxx.com';
      return baseUrl + url;
    },
  },

//vue的template中代码
<div>
  <img :src="getUrl('/xxx')" width="100%" />
</div>