vue.js 怎么获取 Dom 对象的 class 名? 下面本篇文章给大家介绍一下 vue.JS 获取 Dom 对象 class 名 (className) 的方法, 希望对大家有所帮助.
方法一: 通过监听器监听方法 event 参数获取 dom 对象
代码:
- <!doctype html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- vue 自定义指令
- </title>
- <script src="vue-resource-1.3.4.js">
- </script>
- <script src="vue-2.4.0.js">
- </script>
- <style>
- .pop{ width:100px; background-color:#ffff00; height:100px; }
- </style>
- </head>
- <body>
- <div id="app">
- <div class="pop" @click="show">
- </div>
- </div>
- </body>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- msg: '我是 vue'
- },
- methods: {
- show: function(event) {
- alert(event.target.className);
- }
- }
- });
- </script>
- </HTML>
实现原理: 通过给 div 注册监听方法 show()并且方法中传入 event 参数, event 如果直接 alert 出来, 是一个事件类型, 即此处指 mouseclick 单击事件, event.target 即获取单击事件的对象 dom(在 java 中也就是事件源), 获取 dom 直接通过 JavaScript 的代码 dom.className 即可获取相应 dom 的 class.
运行效果如下:
实现方法二: 通过自定义指令的 inserted 钩子函数的 el 参数获取 dom 对象
代码:
- <!doctype HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- vue 自定义指令
- </title>
- <script src="vue-resource-1.3.4.js">
- </script>
- <script src="vue-2.4.0.js">
- </script>
- <style>
- .pop{ width:100px; background-color:#ffff00; height:100px; }
- </style>
- </head>
- <body>
- <div id="app">
- <div class="pop" v-change>
- </div>
- </div>
- </body>
- <script>
- var vm = new Vue({
- el: '#app',
- data: {
- msg: '我是 vue'
- },
- // 自定义指令
- directives: {
- // 注册一个自定义指令
- change: {
- // 指令的定义
- inserted: function(el) {
- alert(el.className);
- }
- }
- }
- });
- </script>
- </HTML>
实现原理: vue.JS 中为自定义指令的每一个钩子函数都提供了四个参数, 分别是: el,binding,vnode,oldVnode, 具体每一个参数的意义大家可以去参考官方文档, 我就简单讲一下 el,el 就是表单指令所绑定的元素, 即相应的 dom, 所以可以直接使用它.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17212.html