使用插值的数据绑定语法

插值是将不同性质的事物插入到其它事物中。在 Vue.js 上下文中，您可以在此处使用 Mustache 语法（双花括号）来定义一个区域，您可以在其中将数据注入到组件的 HTML 模板中。

考虑以下示例：

new Vue({
    data() {
        title: 'Vue.js'
    },
    template: '<span>Framework: {{ title }}</span>'
})

数据属性标题(title)绑定到了 Vue.js 的响应式数据，并将根据用户界面及其数据的状态变化即时更新。我们将在下一个练习中更深入地介绍如何使用插值以及如何将其绑定到数据属性。

练习 1.02：带条件的插值

当您想要将数据输出到模板中或使页面上的元素具有响应性时，请使用花括号将数据插入到模板中。Vue 可以理解并用数据替换该占位符。

要访问本练习的代码文件，请参阅 https://packt.live/3feLsJ3 。

  1. 打开命令行终端并导航到 Exercise 1.02 文件夹并按顺序运行以下命令：

    > cd Exercise1.02/
> code .
> yarn
> yarn serve

    转到 https://localhost:8080 。

  2. 在 Exercise1-02.vue 组件内部，我们通过添加一个名为 data() 的函数来在 <script> 标记内添加数据，并返回一个名为 title 的键，并将标题(title)字符串作为值：

    <script>
export default {
    data() {
        return {
            title: 'My first component!',
        }
    },
}
</script>

  3. 通过将 <h1> 文本替换为内插值 {{ title }} 来引用数据标题(title)：

    <template>
    <div>
        <h1>{{ title }}</h1>
    </div>
</template>

    当您保存此文档时，数据标题现在将显示在您的 h1 标记内。

  4. 在 Vue 中，插值将解析大括号内的任何 JavaScript。例如，您可以使用 toUpperCase() 方法转换大括号内的文本：

    <template>
    <div>
        <h1>{{ title.toUpperCase() }}</h1>
    </div>
</template>

    您应该看到类似以下屏幕截图的输出：

    image 2023 10 10 21 37 27 837
    Figure 1. Figure 1.7: Save the file—you should now have an uppercased title

  5. 除了解析 JavaScript 方法之外，插值还可以处理条件逻辑。在数据对象内部，添加布尔键值对 isUppercase: false：

    <template>
    <div>
        <h1>{{ isUppercase ? title.toUpperCase() : title }}</h1>
    </div>
</template>
<script>
export default {
    data() {
        return {
            title: 'My first component!',
            isUppercase: false,
        }
    },
}
</script>

    前面的代码将生成以下输出：

    image 2023 10 10 21 41 29 929
    Figure 2. Figure 1.8: Exercise 1.02 output after including the inline conditional statement

  6. 将此条件添加到花括号中，保存时您应该会看到非大写的标题。通过将 isUppercase 更改为 true 来调整该值：

    <script>
export default {
    data() {
        return {
            title: 'My first component!',
            isUppercase: true,
        }
    },
}
</script>

以下屏幕截图显示了运行上述代码时生成的最终输出：

image 2023 10 10 21 45 34 041
Figure 3. Figure 1.9: Final Exercise 1.02 output

在本练习中，我们能够通过使用布尔变量在内插标签（大括号）内使用内联条件语句。 这使我们能够修改组件内部显示的数据，而无需过于复杂的条件，这在某些用例中非常有用。

我们现在将学习如何使用各种方法来设计组件的样式。