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 相关文章推荐
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
js字符编码函数区别分析
Dec 28 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
JS运算符简单用法示例
Jan 19 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
详解从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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
解析php中memcache的应用
2013/06/18 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
js密码强度校验
2015/11/10 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
es6数值的扩展方法
2019/03/11 Javascript
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
python与js主要区别点总结
2020/09/13 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
我的动漫时代的创业计划书范文
2014/01/27 职场文书
三爱活动实施方案
2014/03/19 职场文书
黄金酒广告词
2014/03/21 职场文书
初二学习计划书范文
2014/04/27 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书