Vue.js自定义标签属性并获取属性,及绑定img的src属性的坑

摘要:
1、 定义属性:通常,定义属性是为了动态获取属性的值,或动态设置属性的值。如果只想设置一个公共属性,可以直接在备忘录上设置该属性,就像使用html的标题、名称和其他属性一样,例如<h1 myProp=“当前值”>H1标签&lt/H1&gt以下是自定义属性的动态绑定:在元素标记上,使用v-bind:propName='valueInData

一、定义属性:

  一般定义属性都是为了动态的去获取属性的值,或者动态的设置属性的值,如果想仅仅是设置一个普通的属性,直接在便签上设置属性即可,就像使用html的title、name等属性一样,如<h1  myProp ='it is my value'  >H1标签</h1>。

  下面具体说动态绑定自定义属性:

  在元素标签上通过v-bind:propName = ‘valueInData’   解释:propName 是自己指定的属性名,valueInData是定义在Vue实例的data中的属性名。v-bind的指令也可以使用半角的冒号代替。

  

二、获取属性:

  三种方法:

    1. 通用方法:

      在添加了自定义属性 的元素上,绑定点击事件(你也可以换成其他的事件,比如mouseEnter等等,此处以点击事件为例),在绑定的事件处理函数中接受一个参数(通常是event,e等等,你也可以自定义,此处以event参数为例),通过:event.currentTarget.getAttribute('propName ');就可以获取到,此处用currentTarget是指你点击的元素的外层包裹的元素,如果换成target,就指的是你实际点击的元素,建议使用currentTarget,因为如果你的自定义属性的元素内层含有子元素,使用target获取到的是子元素,获取的属性自然也是null,如果想了解target与currenTarget更多区别,请猛戳这里:https://juejin.im/post/59f16ffaf265da43085d4108

    2. 函数传参的形式:    

      <div id='app'>
       <button @click='handleSubmit(e,300)'>提交</button>
      </div>

     

      methods:{
      handleSubmit(a,b){
        console.log(b);        //300 
      }
     }

      

    3. 通过设置ref属性:

      原理:通过给元素设置ref属性,获取到该元素,然后再获取该元素的属性值;方便使用。

      代码: 

      <div id='app'>
        <button    ref='myTargetEle'    name='definedNAME'     @click='handleSubmit(e)'>提交</button>
      </div>
 

     methods :{

      handleSubmit(event){

        const  theEle = this . $refs . myTargetEle;     //获取到元素

        console.log(theEle . name);

      }

     }

三、绑定img标签的src属性时,图片不显示的问题:

    在生成src值的位置(注意不是在html标签上),给图片路径外层加上 require (  //图片路径   );  即可。

免责声明:文章转载自《Vue.js自定义标签属性并获取属性,及绑定img的src属性的坑》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇MongoDB中的_id和ObjectIdios 视频列表处理---分解ZFPlayer下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

微信小程序中使用Vant Weapp的ActionSheet上拉菜单出现的样式问题

以下修改的源码均在action-sheet组件中。在index.wxss:2.下方的取消按钮不居中,通过审查元素发现它的宽带已经超出了手机屏幕的宽度,出现的滚动条导致的,具体什么原因导致暂时不知,解决方案是给.van-action-sheet__cancel添加样式box-sizing:border-box可解决。在index.wxss:.van-actio...

微信支付服务商模式支付与普通微信支付的配置区别

chapter=7_7&index=5注:与普通微信支付相比,源代码是上述7/8之间的区别,其他可以看作是服务提供商自己的微信支付配置;...

C#Win32API编程之PostMessage

本文以C#调用Win32API函数PostMessage完成指定表单的后台鼠标和键盘模拟为例,大致解释了C#调用非托管代码和Window的消息处理机制。我们可以将PostMessage用于函数。成功与否在很大程度上取决于我们传达的信息是否真实。消息表明消息是什么。请原谅我先讲故事。我希望先解释一下PostMessage函数。这是一个异步操作,如下图所示:调用...

【JVM】元空间详解 Metaspace

nocs。JpgNoKlassisMetaspaceNoKlassinMetaspaces专用于存储其他与klass相关的内容,如方法、常量池等。它可以由多个不连续的存储器组成。在元空间GC之后,还将调整阈值。默认情况下,MaxMetaspaceSize基本上是无限的,因为大多数元空间都是在本地内存中分配的,但它仍然受到本地内存大小的限制。为了防止元空间的无...

CentOS7 复制文件夹和移动文件夹

CentOS7在Linux中复制、移动和删除文件的命令有:cp、mv、rm I。文件复制命令cp命令格式:cp[-adfilprsu]源文件(source)目标文件(destination)cp[option]source1source2source3…directory参数描述:-a:指存档,即复制所有目录-d:如果源文件是连接文件(linkfile...

[Oracle]

MyOralceLinux6.5isrunningonVirtualBox.Basicsettingsis4Gmemory,50Ghard-disk,autopartitionwheninstallOL6.5.**Followingseriesofoperationsneedrootprivilege.1.Edit/etc/hostsAddyourhostn...