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. 一次基于etcd的分布式锁自动延时失败问题的排查

    今天在测试基于etcd的分布式锁过程中,在测试获取锁后,释放之前超出TTL时长的情况下自动延长TTL这部分功能,在延长指定key的TTL时总是返回404错误信息,在对目标KEY更新TTL时目标KEY已 ...

  2. Android 在线订单倒计时设计

        接到一个需求,用户下单后,商店这边需要显示在线订单列表,订单十分钟内有效.于是需要设计倒计时,显示每个订单剩余处理时间.       倒计时剩余时间: 订单创建时间 + 10分钟  - 系统当 ...

  3. sql 触发器删除操作

    create trigger CheckDelete on 表 for delete as ) select @state=isnull(字段,'') from deleted if (@state& ...

  4. Jquery 循环map的用法

    $.each(map,function(key,values){console.log(key);$(values).each(function(){console.log("\t" ...

  5. .net 高效开发实用工具

    Visual Studio Visual Studio Productivity Power tool: VS 专业版的效率工具. Web Essentials: 提高开发效率,能够有效的帮助开发人员 ...

  6. TomCat的安装与配置方法

    经过自己的研究,各种烦,所以要写个博客,帮助大家安装这个软件. 一.安装TomCat(因为大家都安装了jdk,所以就不写了) 1.下载TomCat 网址如下:http://tomcat.apache. ...

  7. 图解Netty之Pipeline、channel、Context之间的数据流向。

    声明:本文为原创博文,禁止转载.       以下所绘制图形均基于Netty4.0.28版本. 一.connect(outbound类型事件)  当用户调用channel的connect时,会发起一个 ...

  8. React的井字过三关(2)

    这篇笔记是官方教程的延续笔记,所有代码基于第一篇笔记的结尾代码.旨在解决教程后面提出的五个问题. 一 . 用(X,Y)来取代原有的数字坐标 原来的数字坐标是这样的: 现在的要求是把原来的代码坐标改为二 ...

  9. Django基础,Day6 - 单元测试tests

    在django项目app目录下,有个tests.py,我们通常可以直接在这文件中写我们的单元测试代码. test for a model 根据前面章节的操作步骤下来,在Question Model中有 ...

  10. yii2 可逆加密

    加密: $data 是你要加密的内容, $secretKey 是你自己设置的salt, $encryptedData = Yii::$app->getSecurity()->encrypt ...