代码:
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<x :type="type"></x>
</div>
<script>
Vue.component('x', {
props : ['type'],
template : '<input>'
});
const x = new Vue({
el : '#app',
data : {
type : `password`,
},
})
</script>
</body>
</html>为什么不会:type="type"在这种情况下在这里工作并创建元素，如下所示:<input type="password"> ？
最佳答案
由于您将 type 定义为 prop，因此它不会自动应用于根元素。您需要将其绑定(bind)到您的模板中:
Vue.component('x', {
props : ['type'],
template : '<input :type="type">'
});
任何不被识别为 props 的父作用域属性绑定(bind)都将自动应用于根元素，因此您也可以删除 type prop 并依赖此默认行为:
Vue.component('x', {
props : [],
template : '<input>'
});
关于javascript - VueJs v-bind :type on input element not working not working when using type as property name，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57301421/