(vue.js)Vue2x 如何给超链接的href属性,动态拼接参数?_Web开发_编程问答

(vue.js)Vue2x 如何给超链接的href属性,动态拼接参数?

来源:互联网  时间:2017/4/25 0:17:24

关于网友提出的“ (vue.js)Vue2x 如何给超链接的href属性,动态拼接参数?”问题疑问,本网通过在网上对“ (vue.js)Vue2x 如何给超链接的href属性,动态拼接参数?”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:

问题: (vue.js)Vue2x 如何给超链接的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>, use <div :id="val">.
  • 但我改成:href的方式,发现提示语法错误,不能实现拼接item.id


解决方案1:

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

这样拼就不会出现问题了可以试试

解决方案2:

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

上一篇(vue.js)使用Vue单文件组件,里面引用组件需要至少写3次,有没有更简便的方法,让组件全局可以直接用
下一篇(vue.js)请问vue递归组件里面嵌套组件,怎么写
明星图片
相关文章
《 (vue.js)Vue2x 如何给超链接的href属性,动态拼接参数?》由码蚁之家搜集整理于网络,
联系邮箱:mxgf168#qq.com(#改为@)