已解决
vue .prop修饰符
来自网友在路上 163863提问 提问时间:2023-11-24 01:00:51阅读次数: 63
最佳答案 问答题库638位专家为你答疑解惑
一、官网概念
.prop - 强制绑定为 DOM property
原本自定义属性默认会绑定在DOM的attributes上,加上prop之后会绑定在property,attributes上就不存在咯
在页面上的一个明显区别就是:不加prop时,DOM渲染后自定义属性和值都是暴露在节点上,而加上之后是隐藏了。这应该也是最主要的一个功能,避免数据暴露!
二、什么是property?什么是attributes?
property:DOM元素的属性(property)值 ,是DOM对象原生实现的,例如.obj.id obj.class 这样直接获取目标对象的值
attributes:是HTML中的特性(attribute),而这些特性有的未必会被内置为的DOM元素的属性。比如自定义的特性, 可以使用obj.getAttribute(‘id’),的方法来获取目标对象的属性值。
三、写一写以下代码去理解!!!
代码示例
<template><div><h1>修饰符prop</h1><inputid="input"type="foo":myData.prop="888":myData2="666"/></div>
</template>
<script>
export default {mounted: function () {const input = document.getElementById("input");/**myData用了prop修饰符 myData2未使用根据上面的概念 property是可以拿到myData的值,但是拿不到myData2**///获取DOM上propery的值 console.log(input.myData, input.myData2); //888 undefined//获取DOM上attributes上的值(第一种方法)console.log(input.attributes.myData,input.attributes.myData2.value); //undefined 666//获取DOM上attributes上的值(第二种方法)console.log(input.getAttribute('myData'), input.getAttribute('myData2')); //null 666},
};
</script>
查看全文
99%的人还看了
相似问题
- SpringBoot使用ObjectMapper之Long和BigDemical类型的属性字符串处理,防止前端丢失数值精度
- 〖大前端 - 基础入门三大核心之JS篇㊲〗- DOM改变元素节点的css样式、HTML属性
- QT中样式表常见属性与颜色的设置与应用
- Java继承中的属性名相同但是类型不同的情况
- C#开发的OpenRA游戏之属性QuantizeFacingsFromSequence(7)
- XmlElement注解在Java的数组属性上,以产生多个相同的XML元素
- CSS-列表属性篇
- CSS 文本属性篇
- 计算属性与watch的区别,fetch与axios在vue中的异步请求,单文本组件使用,使用vite创建vue项目,组件的使用方法
- JAXB:用XmlElement注解复杂类型的Java属性,来产生多层嵌套的xml元素
猜你感兴趣
版权申明
本文"vue .prop修饰符":http://eshow365.cn/6-42130-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!
- 上一篇: 【MISRA-C 2012】浓缩版解读
- 下一篇: Nuxt.js Next.js Nest.js