Javascript 使用Vue.js更改DOM元素的值

我在UI上有一个单选按钮和一个文本框。根据在单选按钮字段中的选择，我显示/隐藏文本框，如下所示：

onChangeUpdateAffectedFields

=显示/隐藏文本框的自定义事件

params

：具有字段特定属性（id、名称、输入类型、值、可见性等）的字段对象

formData

：成对列出所有字段

    <template>
     <div> 
     <FormComponent :schema="this.getSchemaFor('Myfieds')" v-model="formData"
 @onChangeUpdateAffectedFields ="onChangeUpdateAffectedFields"
            />
     </div>
    </template>

方法：{
onChangeUpdateAffectedFields:函数（参数）{
params.field.affectedField.forEach（元素=>{
const seq=parseInt（params.field.id.split（“”）[1]）；
var fld=；
fld.visibility=注意，您可以通过定义ref属性简单地访问模板中的元素

<input ref="myElement">

但在您的情况下，我认为更好的方法是简单地将一些值绑定到您的输入，然后简单地使用v-if

基本上：

<input type="checkbox" value="test" v-bind:checked="this.checkState">
<div v-if="checkState">Only shows when checkState is true!</div>


仅在checkState为true时显示！

JSFIDLE中vue的基本示例显示了这种技术，带有多个复选框：
您也应该显示html模板。您是否将属性
v-model
设置为目标输入控件？是的，我已将v-model设置为formData本身，也显示您的模板。：）添加了模板
<input type="checkbox" value="test" v-bind:checked="this.checkState">
<div v-if="checkState">Only shows when checkState is true!</div>