Vue.js 中获取自定义属性值的方法

作者：山岚时间：2026-10-22 01:47:05浏览：105

本文介绍在 Vue.js 项目中如何获取自定义属性的值。通过 v-for 循环渲染按钮，利用 @click 事件监听器传递参数，并在 methods 中处理逻辑，实现自定义属性数据的获取与展示。

Vue.js 获取自定义属性值教程

最近在项目中使用了 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
 }
 }
})

在线演示地址：http://js.jirengu.com/wemefivime

本文内容已整理至《Vue.js前端组件学习教程》，欢迎查阅。

如需了解更多关于 Vue.js 组件的知识，请点击专题 vue.js组件学习教程进行深入学习。

以上就是本文的全部内容，希望对各位的学习有所帮助，也欢迎大家多多支持本站。

作者最新文章

Vue.js官网地址是多少？区分国际站与中文文档入口

2026-11-05 16:29:53

Vue/React 项目中怎么封装复用 flv.js 播放器组件

2026-11-03 19:42:36

Vue.js 动态路由权限控制与菜单生成实战方案

2026-11-03 13:46:47

Vue.js 企业级项目架构搭建与目录规范实战

2026-11-03 12:25:32

Vue 或 React 项目中集成 Swiper.js 的最佳实践

2026-11-02 10:29:42