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(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
Jul 09 Javascript
js动态生成指定行数的表格
Jul 11 Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 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
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
采用header定义为文件然后readfile下载(隐藏下载地址)
2014/01/31 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
基于javascript实现最简单选项卡切换
2017/02/01 Javascript
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
了解javascript中的Dom操作
2019/05/27 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
自考生毕业自我鉴定
2013/10/10 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript