vue.js - Vue2.x 如何给超链接的href属性，动态拼接参数?

问题描述

问 题

<template>
  <ul>
    <li v-for='item in newsList'>
      <!-- 前缀是固定的path名，需要加上id作为参数 -->
      <a href="#/newsDetail/{{item.id}}">
        <span>{{item.desc}}</span>
      </a>
    </li>
  </ul>
</template>

• 以上代码会报错如下，错误信息推荐我使用v-bind在模板绑定数据

- href="#/newsDetail/{{item.id}}": Interpolation inside attributes has been removed. 
Use v-bind or the colon shorthand instead. 
For example, instead of <div id="{{ val }}">, use <div :id="val">.

• 但我改成:href的方式，发现提示语法错误，不能实现拼接item.id

解决方案

<router-link :to="{name:'Index', params: { userId: 123 }}">link</router-link>
循环参见v-for,router-link标签本身也可以用v-for。
API地址：编程式导航，router-link

这篇关于vue.js - Vue2.x 如何给超链接的href属性，动态拼接参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！