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

  • 相关阅读:
    nginx 开机自动启动
    Linux 常用命令
    php中数组操作函数
    Windows系统下GitBash显示的中文乱码解决方案
    更改Git默认编辑器为notepad++
    【js】函数问题
    【JS】JavaScript中的参数传递
    Android基础整理之四大组件Activity
    关于BaseAdapter的使用及优化心得(一)
    使用MySQL Workbench建立数据库,建立新的表,向表中添加数据
  • 原文地址:https://www.cnblogs.com/mafeng/p/7716302.html
Copyright © 2020-2023  润新知