Vue的href动态绑定 和拼接 download下载属性

      <ul>
        <li v-for="item in ziliaoData" :key="item.index">
          <div class="caozuo">
            <router-link :to="item.path">
              <i class="el-icon-view"></i>查看
            </router-link>
            <!-- 这里 download是下载属性 和下载规定的名 -->
            <a :href="item.target" :download="item.name">
              <i class="el-icon-download"></i>下载
            </a>
          </div>
        </li>
      </ul>

data() {
    return {
      ziliaoData: [
        { 
          path:'/index',
          target:"../../../static/pdf/文件名(例如.pdf等)",
          name:'xxx.pdf' //规定下载时候的默认文件名
        }
      ]
    };
  },

文件要放在static文件夹下

herf动态绑定+拼接

<table>
        <tr v-for="item in datas">
            <td>
                <a :href="'addalarmnotes.do?alarmId='+item.id+'&activetype1=detail'" target="_blank">{
   
   {item.name}}</a>
            </td>
        </tr>
</table>

注意的是：

1. 注意点：href前面要加“：”或者v-bind:
2. 字符串要用单引号“ '' ”包住

   加上了冒号是为了动态绑定数据，等号后面可以写变量。
   如果不使用冒号，等号后面就可以写字符串等原始类型数据。这是就无法进行动态绑定数据了

<script>
    new Vue({
        data: {
            datas: [
                { name: 'qq' ,id:"1"},
                { name: 'ww' ,id:"2"},
                { name: 'ee' ,id:"3"}
            ]
        }
    })
</script>