Question

对于一个简单的演示，我想反转我在我的Vue.js实例的数据属性中定义的布尔值。

我尝试了什么：

<button @click="!spanVisible" type="button">Toggle</button>

和

<button @click="(!spanVisible)" type="button">Toggle</button>

我想避免在我的v-on中写一个单独的方法或者有类似的东西：click =＆＃34;＆＃34;：spanVisible ? !spanVisible : !spanVisible因为它只是多余的。

所以现在我的问题主要是：为什么不进行直接反转工作？还有什么其他的可能性来保持简短？

修改

我现在发现的最短变化是使用spanVisible = !spanVisible，但不确定这是否是最简洁的版本。

SOLUTION：

我发现的最佳解决方案是由@Sombriks在评论中提出的：使用@click="!spanVisible"仅评估spanVisible的反转值，但不会替换它的值，为其分配新值，您可以使用@click="spanVisible = !spanVisible"，这似乎是{{1}}是目前最简洁的工作版本。

Answer 1

我认为可以不用任何library(tidyverse) dat <- c(",\"[{time=2014-01-01T00:00:00, NDVI=0.3793765496776215}, {time=2014-02-01T00:00:00, NDVI=2}]\"", "", ",\"[{time=2014-01-01T00:00:00, NDVI=0.4071076986818826}, {time=2014-02-01T00:00:00, NDVI=3}]\"", "", ",\"[{time=2014-01-01T00:00:00, NDVI=0.3412131556625801}, {time=2014-02-01T00:00:00, NDVI=4}]\"" ) l <- list() counter <- 1 for (line in dat){ if(nchar(line)>0){ line <- as.data.frame(line) %>% # We need to remove some unwanted strings mutate(line = str_replace_all(line, c("\\\""="", ",\\["= "", "\\]" = ""))) %>% # The lines can be separated into rows where the string "}, {" occurs separate_rows(line, line, sep = "\\}, \\{") %>% # again removing some unwanted strings mutate(line = str_replace_all(line, c("\\{"="", "\\}"=""))) %>% # add a unique identifier for each observation mutate(observation = row_number()) %>% # separete the rows where a "," occurs separate_rows(line, line, sep =",") %>% separate(., line, into = c("category", "value"), sep = "=") %>% # put it into the long format pivot_wider(names_from = category, values_from = value) l[[counter]] <- line counter <- counter+1 } } l #> [[1]] #> # A tibble: 2 x 3 #> observation time ` NDVI` #> <int> <chr> <chr> #> 1 1 2014-01-01T00:00:00 0.3793765496776215 #> 2 2 2014-02-01T00:00:00 2 #> #> [[2]] #> # A tibble: 2 x 3 #> observation time ` NDVI` #> <int> <chr> <chr> #> 1 1 2014-01-01T00:00:00 0.4071076986818826 #> 2 2 2014-02-01T00:00:00 3 #> #> [[3]] #> # A tibble: 2 x 3 #> observation time ` NDVI` #> <int> <chr> <chr> #> 1 1 2014-01-01T00:00:00 0.3412131556625801 #> 2 2 2014-02-01T00:00:00 4

添加一个Click事件以反转布尔变量的值。像这样：

methods

在脚本数据中：

@click="showExtra = !showExtra"

Answer 2

MVVM或MVC框架的关键点是模型驱动。 spanVisible是您模型的一个属性。所以你需要直接在每个处理程序中更新它的值。

Answer 3

你做错了。 <button v-on:click="toogle" type="button">Toggle</button>

在你的脚本部分：

data () {
    return {
        spanVisible: true
    }
},
methods: {
    toogle () {
        this.spanVisible = !this.spanVisible
    }
}

请注意，如果您使用的是Vue组件，data会以这种方式声明。如果您正在使用文件脚本，则将跳过return

在Vue.js中内联反转boolean @click

3 个答案: