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

网友投稿 392 2023-02-04


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

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

首先开始做一个列表展示

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

刷新一下,没有效果,坑人的Chrome,缓存特别严重,不得不清缓存或者强制刷新。vue在控制台出错了,说a标签内容(文章1)的{{id}}语法错误,查了下文档并没有一个类似的例子,我就开始凭自己的经验试着改写下

整了好一会,发现不理想,看来文档读的不够仔细,有必要针对性的的捣一下。看到标签的class与syle绑定,看到有对象语法和数组语法,二话不说,先把对象写法写进去a标签,刷新看效果,发现a标签的href是这样detail/[object object],我笑了。

看来还是用错了,看了数组语法描述后,直接coding,文章1 这下出效果了

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

先上部分代码

  {{item.Name}}

数据块代码

var vm = new Vue({

  el: '#secHPXNoyBLHtion-strategies',

  data: {

      parentMessage: 'Parent',

      StrategyCnt:0,

      Strategys: [{id:1,name:'文章1'},{id:2,name:'文章2'}]

  }

})

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:java线程状态查询(jdk查看线程)
下一篇:连接共享文件夹 服务器(连接共享文件夹 服务器失败)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~