编程 Javascript

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组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

vue2.0获取自定义属性的值

- Author -

Marven

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript与vbscript数据共享

Jan 09 Javascript

JavaScript CSS菜单功能改进版

Dec 20 Javascript

jQuery实现自动输入email、时间和域名的方法

Aug 24 Javascript

jQuery使用animate实现ul列表项相互飘动效果示例

Sep 16 Javascript

浅谈jquery采用attr修改form表单enctype不起作用的问题

Nov 25 Javascript

AngularJS全局警告框实现方法示例

May 18 Javascript

详解Angular4中路由Router类的跳转navigate

Jun 09 Javascript

jQuery实现table中两列CheckBox只能选中一个的示例

Sep 22 jQuery

mpvue小程序循环动画开启暂停的实现方法

May 15 Javascript

Vuex实现数据共享的方法

Dec 20 Javascript

Vue 列表页带参数进详情页的操作(router-link)

Nov 13 Javascript

微信小程序实现modal弹出框遮罩层组件（可带文本框）

Dec 20 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