Question

我有两个不同的标签。我希望它在切换滑块按钮上起作用。
这是我的代码：

<div class="btn-group" id="save">   
  <label href="#pre_sum" 
         for="id_url"
         data-toggle="modal" 
         class="btn btn-default btn-on btn-lg" 
         ng-click="getdata()" 
         id="saveOn">
    ON
  </label>
  <label id="devicesStatusId" 
         class="btn btn-default btn-off btn-lg" 
         style="color:#fff;background-color:#DA4F49" 
         id="saveOff"
         ng-click="changeDeviceStatus();" 
         id="devicesStatusId">
    OFF
  </label>
</div>

Answer 1

我不能给您直接的Angular.js答案，但是我可以通过一些vue.js +描述来帮助您弄清逻辑（至少我会怎么做）。但是请确保您编辑了问题，以使其描述您要做什么，而人们却不喜欢这些简单的问题。

我也不确定为什么您的标签有多个ID？

示例

<label v-if="labelOn" @click="toggleLabel"> On! </label>
<label v-else @click="toggleLabel"> Off! </label>

<script>
new Vue({
    data: {
        labelOn: false;
    },
    method: {
        toggleLabel()
        {
            if(this.labelOn == true){
                this.labelOn = false;
            } else {
                this.labelOn = true;
            }
        }
    }
})
</script>

说明

脚本非常简单，让我先解释vue.js函数，然后再讲逻辑。

标签上的v-if属性基本上是说“如果此值为true，则显示此内容”，因此在这种情况下，如果labelOn为true，则显示第一个标签，否则显示第二个标签，因此{ {1}}，非常简单。

v-else属性基本上是在您单击此标签时执行此功能。很简单，两个标签上的调用函数都是@click。

现在，切换标签功能仅将toggleLabel的值从true更改为false，反之亦然。总共的逻辑是：

单击标签时，在vue.js脚本中触发labelOn函数
然后，toggleLabel函数检查toggleLabel变量的值是true还是false，如果为true则翻转为false，如果为false则翻转为true。
标签上的labelOn属性现在检查v-if的值，并根据该标签隐藏/显示正确的标签。

希望您可以将这种逻辑应用于vue.js，我知道我开发问题的大部分时间只是我试图进行的活动背后的逻辑，希望这可以解决一些问题。

angularjs中的单个切换按钮可打开/关闭

1 个答案: