偶尔还是会陷入到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 : 

  1. <div>  
  2.     <div id="box" ref="mybox">  
  3.       DEMO  
  4.     </div>  
  5.   </div>
js:
  1. export default {  
  2.   data () {  
  3.     return {  
  4.         
  5.     }  
  6.   },  
  7.   mounted () {  
  8.     this.init();  
  9.   },  
  10.   methods:{  
  11.     init() {  
  12.       const self = this;  
  13.       this.$refs.mybox.style.color = 'red';  
  14.       setTimeout(() => {  
  15.         self.$refs.mybox.style.color = 'blue';  
  16.       },2000)  
  17.     }  
  18.   }  
  19.   
  20. }  


# 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue