Vue - 如何在模板内确定变量的范围

Question

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

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

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... --->

Answer 1

不。

没有这样的办法可以做。并且还v-model需要指定特定的数据，否则它将无法工作。否则，我们可以想到v-for。