vue如何获取自定义元素属性参数值的方法

2024-04-03 12:18:14

偶尔还是会陷入到DOM操作上面去，其实你应该关心的是数据传递，而不是操作DOM。如果你是想获取data-num的数据，可以这样写：

<span @click="getData($event,'21')">55</span>

getData:function (e,num) {
       console.log(num)
}

这样就可以取到这个值了，如果你是确实想操作DOM，那你可以这样写：

<span data-num="21" ref="dataNum" @click="getData($event)">55</span>

getData:function (e) {
    console.log(this.$refs.dataNum.dataset.num);
  }

2.通过e.target.getAttribute

 <div id="app">
    <span data-num="21" @click="getData($event)">55</span>
  </div>

new Vue({
   el:'#app',
   methods:{
     getData:function (e) {
       console.log(e.target.getAttribute('data-num'))
     }
   }
 })

3.自定义命名

如：html

 <div class="live-dd" numId = "<{$item.id}>"></div>

js:

$('.live-dd').on("click",function(){var num = this.getAttribute('numId');location.href='/live/info?id='+num;})

使用jq的方法

<span class="vk_cq5" classid="<{$smarty.get.id}>">

var live_id = $('.vk_cq5').attr('classid')

ref的用法相当于操作dom
html :

<div>
  <div id="box" ref="mybox">
   DEMO
  </div>
 </div>

js:

export default {  
  data () {  
    return {  
        
    }  
  },  
  mounted () {  
    this.init();  
  },  
  methods:{  
    init() {  
      const self = this;  
      this.$refs.mybox.style.color = 'red';  
      setTimeout(() => {  
        self.$refs.mybox.style.color = 'blue';  
      },2000)  
    }  
  }  
  
}

以上所述是小编给大家介绍的vue如何获取自定义元素属性参数值的方法详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

vue中Npm run build 根据环境传递参数方法来打包不同域名

项目开发中,前端在配置后端api域名时很困扰,常常出现: 本地开发环境: api-dev.demo.com 测试环境: api-test.demo.com 线上生产环境: api.demo.com, 这次是在Vue.js项目中打包,教大家个方法: 使用 npm run build -- xxx ,根据传递参数xxx来判定不同的环境,给出不同的域名配置. 1.项目中/config/dev.env.js修改: 新增:HOST: '"dev"' 'use strict' const me
详解vue.js之props传递参数

本篇文章通过demo实例给大家详细分析了props传递参数的用法以及遇到问题后的解决办法,以下是全部内容. 前段时间用vue做一个后台管理系统,其中每一页都需要一个表格来展示信息.自然就想到了将表格提取出来做成公共组件,将不同页面的数据传入进行渲染,达到复用的目的. demo地址 1. 问题发现在父组件中,需要向表格组件传递的数据有表格的内容数据tableData,表格的页面数据page. <div> <my-table :table-data="tableData"
vue2 router 动态传参,多个参数的实例

这个是用vue-cli生成的项目下使用比如有个路由跳转时需要带两个参数: <router-link to='/tr'>查看</router-link> 可以这样写: <router-link to='/tr/uid/pid'>查看</router-link> 然后去router.js 中处理这个路由: import Vue from 'vue' import Router from 'vue-router' import tr from '@/compo
Vue中this.$router.push参数获取方法

传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效.需要用name来指定页面. 及通过路由配置的name属性访问在路由配置文件中定义参数: 通过name获取页面,传递params: 在目标页面通过this.$route.params获取参数: 2.Query 页面通过path和query传递参数,该实例中row为某行表格数据在目标页面通过this.$route
vue不通过路由直接获取url中参数的方法示例

前言众所周知vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接在url后面拼接?mid=100的方式传递参数更灵活,你不需要设置路由,只需要在url后拼接参数即可,但是这种方式就需要通过javascript获取并提取url中的参数,通过传统的方式直接在页面中获取是行不通的了,因为vue中是无法通过location.search()来获取url问号之后的内容的. 当然,这个问题也有解决方法,就是把
vue-router实现组件间的跳转（参数传递）

通过VueRouter来实现组件之间的跳转:参数的传递,具体内容如下 login ---用户名--->main ①明确发送方和接收方 ②配置接收方的路由地址 {path:'/myTest',component:TestComponent} --> {path:'/myTest/:id',component:TestComponent} ③接收方获取传递来的数据 this.$route.params.id ④跳转的时候,发送参数 this.$router.push('/myTest/20') &
详解vue嵌套路由-params传递参数

在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另外一种是值不显示在url中. 1.显示在url中 index.html <div id="app">  <router-view></router-view> </div> main.js params传值是通过 :[参数值]
vue 设置proxyTable参数进行代理跨域

什么是代理跨域浏览器之间有同源策略,出于安全考虑不同域之间不允许获取数据,除了几个特殊的例子 <img>.<script>.<audio>等标签可以进行跨域但是通常都是以get的形式,如果用js的axios去远程获取的话进会触发同源政策,除非你服务端的代码设置了header同意让你访问,明显这很不合理呀!.现在不是都流行前后端的分离吗,后端代码跑掉了只剩下前端了,两个次元的代码我前端该怎么获取啊,感觉使用跨域好麻烦好难搞啊还不一定搞得到,这个时候就可以用到代理跨域了
vue router-link传参以及参数的使用实例

1.路径:http://localhost:8081/#/test?name=1 <router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>(id是参数) 使用:this.$route.query.id 2.路径:http://localhost:8081/#/test/1 <router-link :to="'/test/'+id">跳转</ro
vue-router路由参数刷新消失的问题解决方法

场景:vue-router实现的单页应用,登录页调用登录接口后,服务器返回用户信息,然后通过router.push({name: 'index', params: res.data})传给主页组件,并在主页显示数据.但是刷新页面后,数据就消失了. 解决方案: 1.session&服务器渲染传统的方案是,登录页和主页是单独的两个页面,登录成功后服务器生成用户信息对应的session,然后渲染主页数据,并通过响应头将sessionid传给浏览器并生成相应的cookie文件.这样下次请求页面时,浏览

vue如何获取自定义元素属性参数值的方法

相关推荐

随机推荐