时间戳

首页 > 解决方案 > Vue - 如何在模板中定义变量

vue.js - Vue - 如何在模板中定义变量

问题描述

我可以在组件的模板中以某种方式确定数据范围吗？

例如，如果我有以下代码：

data() {
    a: {test: 'Test A'},
    b: {test: 'Test B'}
}

目前在我必须做的模板中

<div class="a">{{ a.test }}</div>
<div class="b">{{ b.test }}</div>

有什么方法可以确定每个元素的数据范围吗？例如，类似：

<div :scope="a">{{ test }}</div><!-- This prints 'Test A' -->
<div :scope="b">{{ test }}</div><!-- This prints 'Test B' -->

我知道我可以将每个项目提取到一个组件中，但是，我想知道是否有办法在同一个模板中做到这一点？因为它没有自己的逻辑等，所以我不想将它提取到一个单独的组件中，只是为了确定变量的范围。但是，多次重复相同的变量名可能会很乏味。

例如，我有一个表单来创建一个新项目，它有许多输入。我把它们放在一个变量下（例如）newItem，看起来像

newItem: {
    input1: "",
    input2: "",
    input3: null,
    input4: false,
    // etc...
}

在模板中我想做

<div :scope="newItem">
    <input v-model="input1"/>
    <!-- etc.. --->
</div>

代替

<input v-model="newItem.input1"/>
<!--- etc... --->

标签： vue.js

解决方案

不。

没有这样的办法。并且还v-model需要指定特定数据，否则它将不起作用。否则，我们可以考虑v-for。

推荐阅读