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

VUE的进阶 标签属性数据绑定和拼接的更多相关文章
- Vue.js自定义标签属性并获取属性,及绑定img的src属性的坑
一.定义属性: 一般定义属性都是为了动态的去获取属性的值,或者动态的设置属性的值,如果想仅仅是设置一个普通的属性,直接在便签上设置属性即可,就像使用html的title.name等属性一样,如< ...
- js拼接url以及为html某标签属性赋值
记录 js拼接url 比如有些时候我们需要为某按钮实现跳转,可以利用下面的方式做到: function ReturnIndex() { var rex = RegExp("tools&quo ...
- Vue 框架-04-计算属性
Vue 框架-04-计算属性 计算属性是什么? 大家可以去看官网解释:计算属性和侦听器 今天的第一个小实例: 为啥先放折磨一个实例,之前数据绑定的就已经可以实现了,看起来那么简单,就是为了告诉大家,当 ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- Vue (二) --- Vue对象提供的属性功能
--------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者 ...
- vue 对象提供的属性功能、通过axio请求数据(2)
1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...
- Vue基础进阶 之 实例方法--生命周期
在上一篇博客中我们知道生命周期的方法: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听: vm.$nextTick:将方法中的 ...
- vue2.0 之标签属性
标签属性v-bind <template> <div> <ul> <li v-for="item in list"> {{ item ...
- Vue的computed计算属性是如何实现的
一个开始 有如下代码,full是一个计算属性,开始,他的值是'hello world',1s后,msg变成了‘I like’, full的值同步变成了'I like world';其原理解析来看一下. ...
随机推荐
- 对象内存 (扩展 Data Structure Alignment)
对于一个class object来说,我们需要多少内存才能表现出来,大致分为3类,这里在前面文章有内存图 (1)非静态数据成员的综合大小,这也符合了c++对象模型的结构 (2)填充字节,就是我们所说的 ...
- XML快速入门
XML是什么 Extensible Markup Language 自定义标签: 用来传输数据: 可扩展标记语言,是一种类似超文本标记语言的标记语言. 与HTML的比较: 1.不是用来替代HTML的: ...
- Java获取当前服务器IP实现
package hope.ipaddress.demo; import java.net.InetAddress; import java.net.NetworkInterface; import j ...
- 前端构建工具gulpjs的使用介绍及技巧 (转)
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...
- 【距离GDKOI:44天&GDOI:107天】【BZOJ1040】[ZJOI2008] 骑士 (环套树DP)
其实已经准备退役了,但GDOI之前还是会继续学下去的!!当成兴趣在学,已经对竞赛失去信心了的样子,我还是回去跪跪文化课吧QAQ 第一道环套树DP...其实思想挺简单的,就把环拆开,分类处理.若拆成开的 ...
- BZOJ1027 [JSOI2007]合金 【计算几何 + floyd】
题目 某公司加工一种由铁.铝.锡组成的合金.他们的工作很简单.首先进口一些铁铝锡合金原材料,不同种类的 原材料中铁铝锡的比重不同.然后,将每种原材料取出一定量,经过融解.混合,得到新的合金.新的合金的 ...
- zoj3161 Damn Couples
不想打题面了,题面戳这里 这道题目的模型转换地有点猛.首先我们肯定需要让老板把那些不相邻的人的卡牌放在前面,这样他们就作废了.然后剩下的卡牌就都是相邻人之间的了.我们就可以把这个序列分成若干个联通块, ...
- sql或oracle插入数据时进行md5加密
1.sql简单直接调用: SELECT hashbytes(') ; 2.oracle要复杂些 首写需要建函数: CREATE OR REPLACE FUNCTION MD5( passwd IN V ...
- UOJ356 【JOI2017春季合宿】Port Facility
暴力就是O(n^2)连边,二分图,这样只有22分. 我们考虑优化建边,我们按照左端点排序,对于一个新加进来的线段,我们向左端点距其最近的和他相交的线段连边,别的相交的我们连同色边,当一个点连了两条同色 ...
- Educational Codeforces Round 2 B. Queries about less or equal elements
打开题目连接 题意:给2个数组(无序的)啊a,b,判断b数组中的每一个元素大于a数组中个数. ACcode: #include <iostream> #include <vector ...