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 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
jQuery学习笔记之jQuery的事件
Dec 22 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
jQuery选择器全集详解
Nov 24 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 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
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
2015/03/16 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Python线程指南详细介绍
2017/01/05 Python
python实现关键词提取的示例讲解
2018/04/28 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
Nobody Denim官网:购买高级女士牛仔裤
2021/03/15 全球购物
高级Java程序员面试题
2016/06/23 面试题
涉密人员保密承诺书
2014/05/28 职场文书
中学生综合素质自我评价
2015/03/06 职场文书
自书遗嘱范文
2015/08/07 职场文书
图解上海144收音机
2021/04/22 无线电