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 相关文章推荐
IE无法设置短域名下Cookie
Sep 23 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
jQuery限制图片大小的方法
May 25 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
Angular简单验证功能示例
Dec 22 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 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
写一个用户在线显示的程序
2006/10/09 PHP
再次研究下cache_lite
2007/02/14 PHP
php简单获取目录列表的方法
2015/03/24 PHP
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
js获取class的所有元素
2013/03/28 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
Angular 容器部署的方法
2018/04/17 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
python创建和使用字典实例详解
2013/11/01 Python
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
单利模式及python实现方式详解
2018/03/20 Python
python实现二维数组的对角线遍历
2019/03/02 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
python实现logistic分类算法代码
2020/02/28 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
市场营销专科应届生求职信
2013/11/24 职场文书
高中体育教学反思
2014/01/24 职场文书
调解员先进事迹材料
2014/02/07 职场文书
树转促学习心得体会
2014/09/10 职场文书
婚内房产协议书范本
2014/10/02 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
高一语文教学反思
2016/02/16 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书