property与attribute,js中attribute和property

　　本文主要介绍了某视频剪辑软件中的属性和财产的具体使用及区别，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

作为 attribute 和 property 的 value 及 Vue.js 的相关处理

　　属性和财产是网开发中，比较容易混淆的概念，而对于值，因其特殊性，更易困惑，本文尝试做一下梳理和例证

attribute 和 property 的概念

　　简单的说，属性是元素标签的属性，属性是元素对象的属性，例如：

　　输入id="输入"值="测试值"

　　脚本

　　让输入=文档。getelementbyid(“input”)；

　　控制台。日志(输入。get属性( value )；//测试值

　　控制台。日志(输入。值)；//测试值

　　/脚本

　　投入的价值属性是通过标签里的值="测试值"定义的，可以通过input.getAttribute(value )获取，可以通过input.setAttribute(value ，新值)更新

　　投入的价值属性可通过输入值获取和更新，初始值是与属性中的赋值一致的

attribute 和 property 的绑定

　　如果在最开始的时候，更新属性值的值，属性的值也会随之改变

　　但是更新属性值的值（在文本框输入或给输入值赋新值),属性的值不会随之改变，而且此时再更新属性的值，属性的值也不再随之改变，如此动画所示，也可访问此页面尝试进行操作

　　这其实是脏值标记（脏值标志)在起作用，脏值标志的初始值为假的，即属性值的更新默认会改变对应的财产价值，但是一旦用户交互修改了属性值，脏值标志的值就变为没错，即属性值的更新就不会改变对应的属性值了

　　所以在实际项目中，我们一般都是在处理作为财产的价值

Vue.js 对 value 的处理

一般情况使用 :value

　　vue。j的v-bind，一般情况下是在处理属性，如果要作为财产处理的话，需要加上。支柱

　　不过v绑定：值却大都默认为处理财产值，因为被强制转化了，例如：

　　输入id="输入":值="测试值"

　　脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本

　　脚本

　　let input=new Vue({

　　el: #input ，

　　已安装(){

　　console.log(这个100美元。get attribute(“value”)；//null

　　console.log(这个100美元。值)；//测试值

　　console.log(这个. vnode。data)//{ attrs:{ id: input }，domProps: {value:测试值 }}

　　}

　　});

　　/脚本

　　可见，Vue.js将价值作为虚拟节点的数据中的东普罗普斯的属性，而不是属性列表的属性，所以挂载后会成为作为财产的价值

　　在vue。j源码中，强制转化财产的处理如下：

　　//src/编译器/解析器/索引. js

　　函数处理属性(el) {

　　if((修饰语。道具) (

　　！埃尔。组件平台MustUseProp(El。tag，el.attrsMap.type，name)

　　)) {

　　addProp(el，name，value，list[i]，isDynamic)

　　}否则{

　　addAttr(el，name，value，list[i]，isDynamic)

　　}

　　其中platformMustUseProp在网平台的定义如下：

　　//src/platforms/web/util/attrs。射流研究…

　　const accept value=makeMap( input，textarea，option，select，progress )

　　导出常量mustUseProp=(标记：字符串，类型：string，attr: string): boolean={

　　返回（

　　(attr=== value accept value(tag))type！==按钮

　　(attr=== selected tag=== option )

　　(attr=== checked tag=== input )

　　（属性===静音标签===视频)

　　)

　　}

　　由上可知，类型不为按钮的输入，文本区，选项，选择，进度的价值会强制作为财产，而不需要设置为：值。支柱

　　比如textarea标签本身不支持value属性，那么下面代码中value的值就不会显示在多行文本框中。

　　textarea值=测试值/textarea

　　但是，在Vue.js中，以下代码可以成功绑定到value property，并显示在多行文本框中。

　　textarea :value= 测试值 /textarea

特殊情况使用 :value.prop

　　上面的Vue.js源码也要注意，作为属性是强制的，得满足！El.component，即它不是一个动态组件，因为动态组件的el.component的值就是它的is属性的值。

　　也就是说，默认情况下，动态组件的V绑定都是属性。如果它们被用作财产，它们应该使用。例如，道具：

　　div id=应用程序

　　组件：is=element :value.prop=测试值 /组件

　　button @click=更改更改/button

　　/div

　　script src= https://cdn . jsdelivr . net/NPM/vue/dist/vue . js /script

　　脚本

　　let app=new Vue({

　　埃尔： #app ，

　　数据：{

　　元素：“输入”

　　方法：{

　　更改(){

　　this . element= input ===this . element？textarea : input ；

　　}

　　});

　　/脚本

　　如果。prop of: value.prop从上述组件中删除，当切换到textarea时，其值不会显示在多行文本框中。您可以单击此页面上的“交换机”选项卡进行查看。

总结

　　用户交互更新值后，值作为属性和属性的绑定关系将失效。

　　Vue.js一般使用：value使value成为属性。

　　Vue.js动态模板需要使用：value.prop使value成为一个属性。

　　关于vue中属性(attribute)和属性(property)的具体用法和区别，本文到此为止。关于vue attribute property的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。