問個(gè)小問題,數(shù)組渲染頁面

定義指令

 // common.js 

export const join = {

  bind (el, binding, vnode) {
    let value = binding.value
    if (Object.prototype.toString.call([]) !== Object.prototype.toString.call(value)) {
      throw new Error('請(qǐng)傳入數(shù)組類型綁定值')
    }
    value.forEach((item, index) => {
        // 最后一個(gè)特殊處理-符
      if (index + 1 === value.length) {
        el.innerHTML += `<a href="${item.url || 'javascript:void(0)'}">${item.name}</a>`
      } else {
        el.innerHTML += `<a href="${item.url || 'javascript:void(0)'}">${item.name} - </a>`
      }
    })
  }
}

引入使用

// xxx.vue

<template>
      <div v-join="joinData"></div>
</template>
<script>
import { join } from "@/directives/common";
export default {
  name: "app",
  directives: {
    join
  },
  data(){
    return{
     // 數(shù)據(jù)格式
     joinData: [
        { name: "a", url: "http://www.baidu.com" },
        { name: "b", url: "http://www.jd.com" },
        { name: "c", url: "" } // 不需要鏈接的傳空
     ]
    }
  }
}
</script>

這種方式感覺復(fù)用性比較好，不知道你是否可以使用這種數(shù)據(jù)格式。

不就一層v-for

這個(gè)效果？

<div>
  <a v-for="item in arr" 
     :key="item"
     :href="item">
    {{ item }} -
  </a>
</div>

<a v-for:"item in arr" :key="item.index" :bind屬性綁定數(shù)據(jù)就行></a> 

這樣？