vue2.0获取自定义属性的值


Posted in Javascript onMarch 28, 2017

最近在项目中使用了vue.js。在爬坑的路上遇到了很多问题。这里都会给记录下来,今天要说的是怎么获取自定义属性的值。

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://vuejs.org/js/vue.js"></script>
 <meta charset="utf-8">
 <title>JS Bin</title>
</head>
<body>
 <div id="app">
 <button v-for="list in items" @click="getType(list.type)" :type="list.type">click{{list.type}}</button>
 
 <p>type:{{type}}</p>
 
 </div>
 

</body>
</html>

Javascript

var vm = new Vue({
 el:'#app',
 data:{
 type:'',
 items:[
  {type:1},
  {type:2}
 ]
 },
 methods:{
 getType:function(type){
  this.type = type
 }
 }
})

在线demo:http://js.jirengu.com/wemefivime

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

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

Javascript 相关文章推荐
js实现身份证号码验证的简单实例
Feb 19 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 #Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 #Javascript
Vue中的v-cloak使用解读
Mar 27 #Javascript
js实现抽奖效果
Mar 27 #Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 #Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 #Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 #Javascript
You might like
用PHP动态创建Flash动画
2006/10/09 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
laravel框架 api自定义全局异常处理方法
2019/10/11 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
看了就知道什么是JSON
2007/12/09 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
JS常见算法详解
2017/02/28 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
vue下history模式刷新后404错误解决方法
2018/08/18 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
Python随机生成彩票号码的方法
2015/03/05 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
django 外键model的互相读取方法
2018/12/15 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
HTML5样式控制示例代码
2013/11/27 HTML / CSS
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
英文翻译的自我评价语句
2013/10/04 职场文书
自我鉴定总结
2014/03/24 职场文书
学习十八大标语
2014/10/09 职场文书
小学优秀班主任材料
2014/12/17 职场文书
新闻稿格式范文
2015/07/18 职场文书
python中取整数的几种方法
2021/11/07 Python