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


Posted in Javascript onMay 17, 2018

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 常用方法经典总结
Jan 28 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
jquery对象和DOM对象的区别介绍
Aug 09 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 #Javascript
vue 路由嵌套高亮问题的解决方法
May 17 #Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 #Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 #Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 #Javascript
AngularJS实现的base64编码与解码功能示例
May 17 #Javascript
解决修复npm安装全局模块权限的问题
May 17 #Javascript
You might like
通过html表格发电子邮件
2006/10/09 PHP
php批量删除数据
2007/01/18 PHP
用PHP查询搜索引擎排名位置的代码
2010/01/05 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
JS变量及其作用域
2017/03/29 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
Python实现股市信息下载的方法
2015/06/15 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
求职信模版
2013/11/30 职场文书
大学生党课思想汇报
2013/12/29 职场文书
校园安全标语
2014/06/07 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
学生个人评语大全
2015/01/04 职场文书
违纪检讨书范文
2015/01/27 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
债务纠纷起诉书
2015/05/20 职场文书
清明节主题班会
2015/08/14 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
创业计划书之酒店
2019/08/30 职场文书
Golang bufio详细讲解
2022/04/21 Golang