Question

我有一个名为template的复选框。如果我单击该复选框，它应该显示切换信息。

<v-checkbox id="is_template" id="is_template" color="blue-gray" :label="`Is Template ?`" name="is_template" v-bind:value="template" :true-value="1" :false-value="0" v-model="template" @if($category->is_template) checked @endif ></v-checkbox>
<span class="error">{{ $errors->first('is_template') }}</span>

这是复选框

<div class="form-group" id="image_attributes" hidden>
<v-layout align-center justify-space-between row fill-height>
<v-flex mr-2>
 <v-text-field type="text" name="text_x" id="text_x" placeholder="X:"></v-text-field>
</v-flex>
<v-flex mr-2>
<v-text-field type="text" name="text_y" id="text_y" placeholder="Y:"></v-text-field>
</v-flex>
</v-layout>
<v-layout align-center justify-space-between row fill-height>
<v-flex mr-2>
<v-text-field type="text" name="font_size" id="font_size" placeholder="Font Size"></v-text-field>
</v-flex>
<v-flex mr-2>
<v-text-field type="text" name="color" id="color" placeholder="255,255,255"></v-text-field>
</v-flex>
</v-layout>
<v-text-field type="text" name="box_width" id="box_width" placeholder="box_width"></v-text-field>
</div>

这是我要显示的切换信息

Answer 1

为此here

参见工作示例

 import Vue from 'vue'

    new Vue({
      el: '#app',
      data: {
        checked: false,
        name:'',
        address:''
      },
      template: `
      <div>   
        <input type="checkbox" id="checkbox" v-model="checked"> click me
        <div  v-if="checked">
        <input v-model="name" placeholder="Enter Name">
         <input v-model="address" placeholder="Enter Address">
        </div>
    </div>
    `
    })

Vue JS中的单击切换功能

1 个答案: