在vue官网把文档扫了一遍后,就开始写网站项目了,没有设计,就百度里找了一个h5的助赢软件的网站把他copy下来,想想有点坏了,接着把内容改改吧。
首先开始做一个列表展示
vue实例好后,给对象添加默认数据,列表加载成功。查看源代码,看看是否和心目中想的一样。当前还只是把初始化的默认数组展示出来,列表里面的操作,跳转还没有加,试着给初始化的数组添加id字段和数字
刷新一下,没有效果,坑人的Chrome,缓存特别严重,不得不清缓存或者强制刷新。vue在控制台出错了,说a标签内容(<a href="xxx/detail/{{id}}">文章1</a>)的{{id}}语法错误,查了下文档并没有一个类似的例子,我就开始凭自己的经验试着改写下
整了好一会,发现不理想,看来文档读的不够仔细,有必要针对性的的捣一下。看到标签的class与syle绑定,看到有对象语法和数组语法,二话不说,先把对象写法写进去a标签,刷新看效果,发现a标签的href是这样detail/[object object],我笑了。
看来还是用错了,看了数组语法描述后,直接coding,<a v-bind:href="['xxx/detail/'+item.Id]">文章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]" >{{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请求服务端数据,不可能一直用初始化及默认的数据

VUE的进阶 标签属性数据绑定和拼接的更多相关文章

  1. Vue.js自定义标签属性并获取属性,及绑定img的src属性的坑

    一.定义属性: 一般定义属性都是为了动态的去获取属性的值,或者动态的设置属性的值,如果想仅仅是设置一个普通的属性,直接在便签上设置属性即可,就像使用html的title.name等属性一样,如< ...

  2. js拼接url以及为html某标签属性赋值

    记录 js拼接url 比如有些时候我们需要为某按钮实现跳转,可以利用下面的方式做到: function ReturnIndex() { var rex = RegExp("tools&quo ...

  3. Vue 框架-04-计算属性

    Vue 框架-04-计算属性 计算属性是什么? 大家可以去看官网解释:计算属性和侦听器 今天的第一个小实例: 为啥先放折磨一个实例,之前数据绑定的就已经可以实现了,看起来那么简单,就是为了告诉大家,当 ...

  4. Vue中comoputed中的数据绑定

    Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...

  5. Vue (二) --- Vue对象提供的属性功能

    --------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者 ...

  6. vue 对象提供的属性功能、通过axio请求数据(2)

    1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...

  7. Vue基础进阶 之 实例方法--生命周期

    在上一篇博客中我们知道生命周期的方法: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听: vm.$nextTick:将方法中的 ...

  8. vue2.0 之标签属性

    标签属性v-bind <template> <div> <ul> <li v-for="item in list"> {{ item ...

  9. Vue的computed计算属性是如何实现的

    一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...

随机推荐

  1. input file request.files[] 为空

    需要在 form 里设置 一句话 :  $('form').attr("enctype", "multipart/form-data"); <form e ...

  2. 【bzoj4894】天赋 矩阵树定理

    题目描述 小明有许多潜在的天赋,他希望学习这些天赋来变得更强.正如许多游戏中一样,小明也有n种潜在的天赋,但有一些天赋必须是要有前置天赋才能够学习得到的.也就是说,有一些天赋必须是要在学习了另一个天赋 ...

  3. Using Let’s Encrypt for free SSL Certs with Netscaler

    Using Let’s Encrypt for free SSL Certs with Netscaler If you haven’t heard, Let’s Encrypt (https://l ...

  4. BZOJ 1876 [SDOI2009] SuperGcd | PY好题

    题面就是让你求两个超级大整数,求GCD 题解: 题目本意应该是出题人想考考高精度取膜 但是可以通过一种神奇的Stein算法来做 由J. Stein 1961年提出的Stein算法很好的解决了欧几里德算 ...

  5. BZOJ5297 [Cqoi2018]社交网络 【矩阵树定理】

    题目链接 BZOJ5297 题解 最近这玩意这么那么火 这题要用到有向图的矩阵树定理 主对角线上对应入度 剩余位置如果有边则为\(-1\),不然为\(0\) \(M_{i,i}\)即为以\(i\)为根 ...

  6. RabbitMQ Windows下安装问题解决

    一.问题描述 安装后出现如下问题描述 C:\Program Files\RabbitMQ Server\rabbitmq_server-3.4.3\sbin>rabbitmqctl status ...

  7. [ CodeVS冲杯之路 ] P1063

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/1063/ 本来是想写石子合并的,结果把题目看错了,写成了合并果子…… 凑合交了上去,直接A了…… 题目将可以将任意两堆合 ...

  8. VLC for iOS 2.3.0

    http://www.cocoachina.com/bbs/read.php?tid=231898 VLC for iOS 2.3.0       本帖属于CocoaChina会员发表,转帖请写明来源 ...

  9. Java设计模式_创建型模式_单例模式

    单例模式的实现: 定义一个类,在类中定义该类的静态变量,再定一个一个获取该类的静态变量的方法. UML图:

  10. C++编程见闻

    今天心血来潮,看到很多天借的一本书<轻松学C++编程>,书就一般,但是由于自己的刚开始学c++,勉强凑活来看吧,就把学习的过程亮出来,权且对自己的一种变相激励也好. 程序一 首先:打开vi ...