精华内容
下载资源
问答
  • 主要介绍了vue如何获取自定义元素属性参数值的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue标签自定义属性的使用

    万次阅读 2019-08-23 18:12:29
    vue获取dom元素可以使用 ref 要想获得自定义属性,可以通过设置 ref 实现 <span data-num="21" ref="dataNum" @click="getData">55</span> getData:function () { console.log(thi...

    vue 中,尽量避免对dom的操作,通过对状态的管理实现需要的功能
    举个例子:
    vue获取dom元素可以使用 ref 要想获得自定义属性,可以通过设置 ref 实现

    <span data-num="21" ref="dataNum"  @click="getData">55</span>
    
    getData:function () {
       console.log(this.$refs.dataNum.dataset.num);
    }
    

    但是vue 不推荐这样做,你可以这样做

    <span  @click="getData('21')">55</span>
    
    getData:function (num) {
       console.log(num);
    }
    

    像这样的(关于input中的属性),一般可以放到name空间里,可以通过$attr属性获取相应的值

    <input ref="dataNum" name="21" :value="value1"></input>
    <span @click="getData">获取name</span>
    
    getData:function () {
       console.log(this.$refs.dataNum.$attr.name);
    }
    

    但是这样为何不直接传进去状态值呢

    <input v-modle="value1"></input>
    <span @click="getData('21')">获取name</span>
    
    getData:function (num) {
       console.log(num);
    }
    

    当然操作dom还可以通过e.target操作获取,还是不推荐

    <span data-num="21" @click="getData">55</span>
    
    getData:function (e) {
       console.log(e.target.getAttribute('data-num'));
    }
    
    展开全文
  • Vue自定义属性设置及获取

    千次阅读 2019-08-23 15:12:23
    写多了小程序,再写vue...那么在小程序中的标签自定义属性的写法及获取如下: 小程序: ①.标签设置自定义属性 <image catchtap="guanbiFn" data-which="look" src="../images/guanbia.png" class="guanbiImg"/&...

    写多了小程序,再写vue,在写方法传值的时候就自然而然的就想要去使用自定义属性,既简单又方便。

    小程序中设置自定义属性及获取

    那么在小程序中的标签自定义属性的写法及获取如下:

    小程序:
    ①.标签设置自定义属性
    <image catchtap="guanbiFn" data-which="look" src="../images/guanbia.png" class="guanbiImg"/>
    //就想这样直接用data-自定义属性名,然后赋上你所需要的值就可以
    ②、获取标签设置的自定义属性值
      guanbiFn(e){
      		console.log("e.currentTarget.dataset.which");//look
      }
      //这样就直接获取到了
    

    Vue中设置自定义属性及获取

    那么在使用vue去写项目的时候,再想用这一套明显是有点不合适的。
    上一篇我们也说过,vue中设置动态属性是要用v-modal的,也可以简写为半角冒号":",那么也就是说我们想要设置自定义属性也还是得用这个语法才可以。

    Vue:
    ①、标签设置自定义属性
    <span :index="index" :show="item.IsShow" ref="dataSelf" @click="selectBrand" v-for="(item,index) in getChoiceData.BrandList">{{item.Name}}</span>
    //看上面一行代码,有循环,循环中用了内容和下标,那么我想设置有关于下标数值和某一个内容的自定义属性,方便在方法中去使用,这就是一种方法,(当然了除了这种传值其实也可以直接形参传值的那种方法去获取也可以)。
    ②、获取标签设置的自定义属性值
    vue获取的时候有两种方法:
    	  selectBrand(e) {
    	  		//方法一:操作Dom
    	  		console.log(this.$refs.dataSelf.dataset.index);//获取到我们循环中的下标值
    	  		//方法二:通过e.target.getAttribute
    	  		console.log(e.target.getAttribute('show'));//获取到循环中的IsShow的值
    	  }
    
    
    展开全文
  • Vue.js 自定义指令

    2020-12-31 09:18:59
    添加一个自定义指令,有两种方式:通过 Vue.directive() 函数注册一个全局的指令。通过组件的 directives 属性,对该组件添加一个局部的指令。创建全局指令:需要传入指令名称以及一个包含指令钩子函数的对象,该...

    添加一个自定义指令,有两种方式:

    通过 Vue.directive() 函数注册一个全局的指令。

    通过组件的 directives 属性,对该组件添加一个局部的指令。

    创建全局指令:

    需要传入指令名称以及一个包含指令钩子函数的对象,该对象的键即钩子函数的函数名,值即函数体,钩子函数可以有多个。

    Vue.directive('self_defined_name',{

    bind:function(el,binding){

    //do someting

    },

    inserted: function(el,binding){

    //do something

    },

    }

    创建局部指令:

    直接向创建的 Vue 实例的 directives 字典属性添加键值对,键值对即需要添加的自定义指令及对应钩子函数字典对象。键值对可以有多个,对应多个自定义指令。

    new Vue({

    el:'#app',

    directives:{

    self_defined_name1:{

    bind:function(el,binding){

    //do something

    }

    inserted:function(el,binding){

    //do something

    },

    }

    self_defined_name2:{

    bind:function(el,binding){

    //do something

    }

    inserted:function(el,binding){

    //do something

    },

    }

    }

    })

    闫伟超

    闫伟超

    yif***chaoran@163.com2个月前 (11-01)

    展开全文
  • --设置data中的num给属性data-num赋值--> <div id="app"> <button :data-num="num" ref="dataNum" @click="getsum($event)">点我</button> </div> var vone = new Vue({ el: '#app...
    <!--设置data中的num给属性data-num赋值-->
    <div id="app">
      <button :data-num="num" ref="dataNum"  @click="getsum($event)">点我</button>
    </div>
    
    
    var vone = new Vue({
        el: '#app',
        data: {
            num : 100
          },
        methods: {
            //获取
            getsum: function(e) {
                //方法一:操作DOM
                console.log(this.$refs.dataNum.dataset.num); //100
                 //方法二:通过e.target.getAttribute
                console.log(e.target.getAttribute('data-num'));//100
            }
        }
    })
    

     

    展开全文
  • 我们在vue中有时候为给标签加一些特有的属性, 当我们在标签上触发了事件之后, 就可以在 event 对象上面获取 标签的写法 <div class="menu-item" @click="clickMenu('参数一',$event)" :data-mytype="1"> &...
  • 语法: data-属性 <ul> <li v-for='item in list' > <span :data-index="item.id" @onclick ="cools($evevt)"></span> </li> </ul> methods:{ cools(ev...
  • 获取自定义属性的方法:第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面第二步:在标签上继续绑定:date-id = "item.id"属性第三步:在里面的属性methods里面添写上事件函数 ...
  • 于是开始了自定义Video控制的采坑之旅。。 首页效果图:   需求描述: 当鼠标放在图片上的时候,自动播放视频,并显示预览进度条,当鼠标移开,显示预览图片,再次hover图片,继续上次播放 视频详情页的效果图: ...
  • Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来...
  • 一、定义属性:一般定义属性都是为了动态的去获取属性的值...下面具体说动态绑定自定义属性:在元素标签上通过v-bind:propName = ‘valueInData’ 解释:propName 是自己指定的属性名,valueInData是定义在Vue实例的...
  • 场景吾辈在使用 Vuetify 时突然遇到的,明明 img 标签就可以使用相对路径获取到图片,而 Veutify 的组件 v-img 却不能使用。如下面 3 种加载图片的方式吾辈在 segmentfault 上的提问原因是的,居然必须用 require() ...
  • 但是,我需要在此包装器旁边包含一个包含自定义属性的组件 . 就在那时我发现该组件上的属性从未被读入 .index.htmlTestItem.vue{{ testProp }}export default {props: {testProp: {type: String,default: "Default ...
  • 一些开发者,特别是有使用过「模板技术」的开发者(例如 Handlebars),刚开始尝试使用 React 编写应用时,可能会惊讶的发现,JSX 竟然没有内建支持类似其它模板引擎似的任何结构控制语句或指令。...
  • ue全局和局部自定义属性v-xxx 一局部自定义属性v-xxx <template> <div class="container"> <h1>局部:自定义指令</h1> <!-- 局部自定义指令 --> <input type="text" v-aaa=...
  • vue获取自定义属性的值,标签的值

    千次阅读 2020-10-23 11:32:15
    自定义属性为data-val,通过e.target.getAttribute()获取。 <span data-val="0" @click="getVal0">点我</span> getVal0(e){ console.log(e.target.getAttribute('data-val')); }, 方式...
  • Vue 获取自定义属性的值

    千次阅读 2021-03-07 07:24:35
    在jquery中,如果要获取 data-***的值可以通过$('目标元素').data('属性名')来获取。在Vue中如何获取该值呢?1.换个思路,作为参数传递。如下代码:say himethods: {say(message){console.log(message)}}2.通过e....
  • vue自定义属性props

    2021-09-24 18:08:10
    props是自定义属性,允许使用者通过自定义属性,为当前组件指定初始值。自定义属性的名字是自己定义的(只要名字合法) props是只读的,不可修改 props:{ //自定义属性A: {/* 配置选项*/} //自定义属性B: {/* 配置...
  • 假设有一个标签h5, 我们给它添加了一个自定义属性值,(item.id是从动态添加的) 点击h5 标签,如何才能获取当前对应的自定义属性值呢? 想当然的我最开始这样写: ...
  • 这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById(“id”);...如果给子组件加ref,然后获取到该DOM元素之后改变相应的自定义属性的值,vue会报错: Avoid mutating a prop dir
  • [TOC] 1.1.1什么是组件 一个vue文件就是一个组件 组件将html标签/css样式/对应JS打包成一个整体,也可以理解钻进一个具有样式和特效的自定义标签。...
  • Vue自定义标签及其使用

    千次阅读 2020-07-20 18:14:20
    Vue自定义标签及其使用问题需求自定义创建组件的vue文件编辑组件使用导入申明使用使用整个代码效果 问题 我们在使用Vue开发移动端应用程序时,常常使用Vant Weapp中的组件库,但是我们想过它是怎么实现的吗?是否...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,367
精华内容 12,946
关键字:

vue设置标签自定义属性

vue 订阅
友情链接: sorcecode.rar