<script>
export default {
name: "Input",
components: {},
data() {
return {
value_1: "123",
value_2: "321"
};
},
created() {},
methods: {
defaultDom() {
return (
<div>
<input vModel={this.value_1} />
<button onclick={this.defaultClear}>清空</button>
</div>
);
},
defaultClear() {
this.value_1 = "";
},
jsxDom(h) {
return h("div", [
h("input", {
attrs: {
value: this.value_2
},
on: {
input: e => {
this.value_2 = e.target.value;
}
}
}),
h("button", { on: { click: this.jsxClear } }, ["清空"])
]);
},
jsxClear() {
this.value_2 = "";
}
},
render(h) {
let inputDOM_1 = this.defaultDom();
let inputDOM_2 = this.jsxDom(h);
return h("div", [
inputDOM_1,
h("p", [this.value_1]),
inputDOM_2,
h("p", [this.value_2])
]);
}
};
</script>
<style lang="less" scoped></style>
如上图所示 分别有两个Input的写法
1:defaultDom 直接利用vModel来双向绑定input的值
2:jsxDom 利用on:input 来进行双向绑定
如果在input 直接改变的时候 双向绑定是成功的
但是 当为每个input 添加了一个清空Input的Button之后
jsxDom的Button 执行了 jsxClear 如果值不改变可以清空值
但是如果操作步骤是
先改变 此Input的值 再点击清空按钮
这时候就无法清空input的内容了
请问这种情况是什么原因,如果要用 h()
应该怎么写才对?
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…