vue 标签属性数据绑定和拼接的实现方法

这篇文章主要为大家详细介绍了vue 标签属性数据绑定和拼接的实现方法，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

在vue官网把文档扫了一遍后，就开始写网站项目了，没有设计，就百度里找了一个h5的助赢软件的网站把他copy下来，想想有点坏了，接着把内容改改吧。

首先开始做一个列表展示

vue实例好后，给对象添加默认数据，列表加载成功。查看源代码，看看是否和心目中想的一样。当前还只是把初始化的默认数组展示出来，列表里面的操作，跳转还没有加，试着给初始化的数组添加id字段和数字

刷新一下，没有效果，坑人的Chrome，缓存特别严重，不得不清缓存或者强制刷新。vue在控制台出错了，说a标签内容（<a href="xxx/detail/{{id}}" rel="external nofollow" >文章1</a>）的{{id}}语法错误，查了下文档并没有一个类似的例子，我就开始凭自己的经验试着改写下
整了好一会，发现不理想，看来文档读的不够仔细，有必要针对性的的捣一下。看到标签的class与syle绑定，看到有对象语法和数组语法，二话不说，先把对象写法写进去a标签，刷新看效果，发现a标签的href是这样detail/[object object]，我笑了。

看来还是用错了，看了数组语法描述后，直接coding，<a v-bind:href="['xxx/detail/'+item.Id]" rel="external nofollow" rel="external nofollow" >文章1</a> 这下出效果了

为什么叫数组语法，一直不明白了。为什么这个地方只能这样写，总感觉不妥，找个类似的安全看看，别人是怎么写的，发现自己写的太吐血了

先上部分代码

代码如下：

<tr v-for="item in Strategys" class="ng-scope">
 <td>
　　<a class="ng-binding ng-scope" v-bind:href="['xxx/detail/'+item.Id]" rel="external nofollow" rel="external nofollow" >{{item.Name}}</a>
 </td>

数据块代码

代码如下：

var vm = new Vue({
　　el: '#section-strategies',
　　data: {
　　　　　　parentMessage: 'Parent',
　　　　　　StrategyCnt:0,
　　　　　　Strategys: [{id:1,name:'文章1'}，{id:2,name:'文章2'}]
　　}
 })

接着上大招，使用Ajax请求服务端数据，不可能一直用初始化及默认的数据

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/5524-0.html

注：关于vue 标签属性数据绑定和拼接的实现方法的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js