zoukankan      html  css  js  c++  java
  • 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请求服务端数据,不可能一直用初始化及默认的数据

  • 相关阅读:
    27 Spring Cloud Feign整合Hystrix实现容错处理
    26 Spring Cloud使用Hystrix实现容错处理
    25 Spring Cloud Hystrix缓存与合并请求
    24 Spring Cloud Hystrix资源隔离策略(线程、信号量)
    23 Spring Cloud Hystrix(熔断器)介绍及使用
    22 Spring Cloud Feign的自定义配置及使用
    21 Spring Cloud使用Feign调用服务接口
    20 Spring Cloud Ribbon配置详解
    19 Spring Cloud Ribbon自定义负载均衡策略
    18 Spring Cloud Ribbon负载均衡策略介绍
  • 原文地址:https://www.cnblogs.com/mafeng/p/7716302.html
Copyright © 2011-2022 走看看