Vue绑定＜audio＞/＜video＞标记的muted属性无效问题随记

本文主要是介绍Vue绑定＜audio＞/＜video＞标记的muted属性无效问题随记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

问题代码

<!--这里的muted绑定不起作用-->
<audio :muted="isMuted" ref="audioPlayer"></audio>

援引Github上的issue回复

翻译：muted属性类似于<input>的value属性，如果他在元素初始化时是内联的，那么属性值将作为初始值；但是如果在一开始并没有内联，只是后续更改了attribute ¹ 值，那么将不会起任何效果，正确的做法是设置相对应的property ¹ 值。

解决方式：使用watch来手动设置muted

html

<audio ref="audioPlayer"></audio>

javascript

watch:{isMuted(val){if(val){this.$refs.audioPlayer.muted = 'muted'}else{this.$refs.audioPlayer.muted = ''}}
}

以上

---

1. 关于attribute和property值的区别，可以看我往期的文章。 ↩︎ ↩︎

这篇关于Vue绑定＜audio＞/＜video＞标记的muted属性无效问题随记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---