vue 标签属性数据绑定和拼接的实现方法
在vue官网把文档扫了一遍后,就开始写网站项目了,没有设计,就百度里找了一个h5的助赢软件的网站把他copy下来,想想有点坏了,接着把内容改改吧。
首先开始做一个列表展示
vue实例好后,给对象添加默认数据,列表加载成功。查看源代码,看看是否和心目中想的一样。当前还只是把初始化的默认数组展示出来,列表里面的操作,跳转还没有加,试着给初始化的数组添加id字段和数字
刷新一下,没有效果,坑人的Chrome,缓存特别严重,不得不清缓存或者强制刷新。vue在控制台出错了,说a标签内容(<a href="xxx/detail/{{id}}" rel="external nofollow" >文章1</a>)的{{id}}语法错误,查了下文档并没有一个类似的例子,我就开始凭自己的经验试着改写下
整了好一会,发现不理想,看来文档读的不够仔细,有必要针对性的的捣一下。看到标签的class与syle绑定,看到有对象语法和数组语法,二话不说,先把对象写法写进去a标签,刷新看效果,发现a标签的href是这样detail/[object object],我笑了。
看来还是用错了,看了数组语法描述后,直接coding,<a v-bind:href="['xxx/detail/'+item.Id]" rel="external nofollow" rel="external nofollow" >文章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]" rel="external nofollow" rel="external nofollow" >{{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请求服务端数据,不可能一直用初始化及默认的数据
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- HDUOJ-------2149Public Sale
- HDUOJ--1159Common Subsequence
- HDUOJ----1170Milk
- HDUOJ----1263水果
- HDUOJ----(2064)汉诺塔III
- HDUOJ-----2065"红色病毒"问题
- HDUOJ -----1686
- go语言读取csv文件并输出的方法
- HDUOJ----3342Legal or Not
- go语言基本类型
- HDUOJ----2647Reward
- hduoj------确定比赛名次
- HDUOJ----1165Eddy's research II
- HDUOJ-----1556Color the ball
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Flask框架教程汇总(1)---视图/重定向/传参
- OkHttp请求耗时统计
- Ubuntu 18.04 通过 Docker 快速部署 Smokeping 2.6.11 教程
- MySQL 8.0新特性 — 函数索引
- Docker快速上手指北(一)【技术创作101训练营】
- leetcode树之二叉搜索树的最近公共祖先
- 【技术创作101训练营】技术角 | 在CentOS 8上使用Nginx 1.18: 基本配置
- Java诊断应用之Arthas实战(技术创作101训练营)
- 突击并发编程JUC系列-数组类型AtomicLongArray
- 个人量化投资体系搭建(一)
- 服务端的 WebAssembly 与 Rust 入门篇
- pImpl
- Flask+requests发起页面请求示例
- 【技术创作101训练营】Git 如何成功配置SSH key连接多个代码平台?
- 深入浅出iOS内存管理-技术创作101训练营