HTML5技术

vue的进阶 标签属性数据绑定和拼接 - kengwfpzu920

字号+ 作者:H5之家 来源:H5之家 2017-03-03 16:02 我要评论( )

在vue官网把文档扫了一遍后,就开始写网站项目了,没有设计,就百度里找了一个h5的助赢软件的网站把他copy下来,想想有点坏了,接着把内容改改吧。 首先开始做一个列表展示 vue实例好后,给对象添加默认数据,列表加载成功。查看源代码,看看是否和心目中想

在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">
<td>
  <a 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请求服务端数据,不可能一直用初始化及默认的数据

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • css基础知识之属性选择器 - Aqiaoba

    css基础知识之属性选择器 - Aqiaoba

    2017-03-02 17:00

  • canvas标签的使用 - Aqiaoba

    canvas标签的使用 - Aqiaoba

    2017-03-02 17:00

  • HTML5标签学习笔记 - 就只是小茗

    HTML5标签学习笔记 - 就只是小茗

    2017-02-28 11:00

  • html5常用基本标签 - 宇宙坑一号

    html5常用基本标签 - 宇宙坑一号

    2017-02-26 15:01

网友点评
f