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 相关文章推荐
jquery 事件执行检测代码
Dec 09 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
JS实现标签页切换效果
May 04 Javascript
JavaScript 巧学巧用
May 23 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 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绘制一个扇形的方法
2015/01/24 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
动态控制Table的js代码
2007/03/07 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
python字符串连接方式汇总
2014/08/21 Python
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
python实现中文转换url编码的方法
2016/06/14 Python
Python连接phoenix的方法示例
2017/09/29 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
对Python3中的input函数详解
2018/04/22 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
Python 文件数据读写的具体实现
2020/01/24 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
俄罗斯第一家篮球店:StreetBall
2020/07/30 全球购物
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
2014年手术室工作总结
2014/11/26 职场文书
先进党组织事迹材料
2014/12/26 职场文书
合理化建议书
2015/02/04 职场文书
质检员岗位职责范本
2015/04/07 职场文书
python迷宫问题深度优先遍历实例
2021/06/20 Python
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技