2016年12月10日 17:18:42 星期六

情景:

主要介绍 v-for 循环时对变量的处理方法

主要以table标签为例

1. 为 tr 标签动态添加属性

 <tr v-for="item in items" v-bind:id="'item_' + item.id">

 //效果: <tr id="item_7">

2.截取字符串

     <td>{{subTitle(item.title)}}</td>
.....
methods: {
subTitle: function(val) {
if (val.length < 20) {
return val;
} else {
return val.substring(0, 20) + '...';
}
}
}

3.绑定事件

 <td><span v-bind:id="'item_op_' + item.id" v-on:click="del('delArticle', 'id', item.id)">删除</span></td>

 //显示效果: <td><span id="item_op_7">删除</span></td>

 ....

 methods: {
del: function (method, itemKey, itemValue) {
abc(method, itemKey, itemValue); // 页面中定义的其它函数, 也可以在里边直接写逻辑
}
} ....

4.radio 默认选中

 <template v-for="(item, index) in types">
<input type="radio" name="params" v-bind:value="item.type" v-model="article.type" > {{item.name}} &emsp;
</template> // 参数解释
// types: 所有的文章类型; article.type: 某篇文章的类型
// 当article.type == item.type 时radio被选中

5.条件渲染(if-else)

 <template v-for="(func, index) in item.method">
<template v-if="(index + 1) % 5 === 0"> //每四个换行, 注意是3个=号
<br>
</template> <input type="checkbox" v-bind:value="func.name" v-bind:title="func.name"> {{func.doc}}
</template>

6. 调用函数处理样式: 注意, 在标签的属性中调用函数要把属性改写成 v-bind:class="" 或者简写 :class=""

 <tr v-for="(row, index) in list" :data-id="row.id" :class="classChange(row.status)">
....
</tr> .... var vm = new Vue({
el: '#list',
data: {
'list':''
},
methods: {
classChange: function (status) {
console.log(status);
if (status === '') {
return 'am-success';
} else if (status === '-1') {
return 'am-warning';
}
}
}
});

vue.js 使用小结的更多相关文章

  1. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  2. Vue.js项目模板搭建

    前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我 ...

  3. Vue.js 服务端渲染业务入门实践

    作者:威威(沪江前端开发工程师) 本文原创,转载请注明作者及出处. 背景 最近, 产品同学一如往常笑嘻嘻的递来需求文档, 纵使内心万般拒绝, 身体倒是很诚实. 接过需求,好在需求不复杂, 简单构思 后 ...

  4. Vue.js的从入门到放弃进击录(一)

    感谢我们项目组给机会,让我学了Vue.js,打开新世界大门...哈哈哈,也没有那么夸张,不过学下来确实觉得入门还是蛮容易的.我大概前前后后学了有一个月的样子,一开始只是比较急着可以写东西出来,后来因为 ...

  5. Vue js 的生命周期详解

    Vue 实例的生命周期 Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列 过程,我们称这是 Vue 的生命周期.通俗说就是 Vue ...

  6. Vue.js组件间通信方式总结

    平时在使用Vue框架的业务开发中,组件不仅仅要把模板的内容进行复用,更重要的是组件之间要进行通信.组件之间通信分为三种:父-子:子-父:跨级组件通信.下面,就组件间如何通信做一些总结. 1.父组件到子 ...

  7. Web前端-Vue.js必备框架(三)

    Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...

  8. 一天带你入门到放弃vue.js(一)

    写在前面的话! 每个新的框架入手都会进行一些列的扯犊子!这里不多说那么多!简简单单说一下vue吧! Vue.js是目前三大框架(angular,vue,react)之一,是渐进式js框架,据说是摒弃了 ...

  9. 2018-11-23 手工翻译Vue.js源码:尝试重命名标识符与文本

    续前文: 手工翻译Vue.js源码第一步:14个文件重命名 对core/instance/索引中的变量, 方法进行重命名如下(题图): import { 混入初始化 } from './初始化' im ...

随机推荐

  1. java学习笔记之线程2wait和notifyAll

    2.乐观锁和悲观锁 悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到 ...

  2. 通过维基API实现维基百科查询功能

    通过英文维基的免费API,可以实现对维基百科的搜索查询或者标题全文查询等,尝试了一下通过title实现全文查询,返回的结果是wikitext格式,暂时不知道该如何应用,所以仅实现了查询功能,可以返回最 ...

  3. destoon : 后台无法登录问题解决

    经常有朋友在destoon搬家的时候 , 数据还原之后 , 会出现后台无法登录的情况 . 具体表现为后台帐号密码输入后点击确定 , 页面刷新 .并没有跳转到相应后台页面 . 但是如果帐号密码输入错误 ...

  4. iOS XCode7制作.Framework动态库和.a静态库的总结

    一.开发SDK时的支持情况: OC语言制作动态库时,支持iOS8+:OC语言制作静态库,支持iOS7+. Swift语言制作动态库时,支持iOS8+;Swift不支持静态库. 对于SDK来说,支持情况 ...

  5. PHPstorm同步文件时与ftp断开连接

    一用PHPstorm同步对比服务器端和本地文件的差异时,一会就断开ftp再也连不上了,弄了好久终于找到原因了,好像这个同步会频繁请求建立连接,服务器本地安全策略屏蔽了ip,还是下载后再做修改或者直接在 ...

  6. Beta阶段发布说明

    OverWatch来浪狼人杀助手Beta版本发布说明 Beta版本的新功能 添加了忘记密码与重置密码的功能 添加了语音流程提示的功能 添加了搜索好友的功能 添加了添加好友的功能 添加了能够直接通过点击 ...

  7. 将一张表的数据,拷贝到另一张表中sql

    两张表的字段一样 create table 目标表 as  select * from 原表;

  8. C# 数据批量插入到数据库SqlBulkCopy(源数据类型:List<T> Or DataTable)

      /*_____________________ List<T>类型数据 To Sql_______________________________*/ /// <summary& ...

  9. spring mvc 的jpa JpaRepository数据层 访问方式汇总

    本文转载至:http://perfy315.iteye.com/blog/1460226 AppleFramework在数据访问控制层采用了Spring Data作为这一层的解决方案,下面就对Spri ...

  10. path操作

    1. 通过当前目录获取想要的目录,采用relative函数,例如: function test(){ var xx= path.relative('/', '../../'); console.log ...