vue2技能树（4）-插值、动态参数、指令修饰符、计算属性、侦听器

原创

已于 2023-10-23 18:56:07 修改 · 998 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

于 2023-10-19 17:40:17 首次发布

本文详细介绍了Vue2中的文本插值、表达式、过滤器、计算属性、侦听器以及指令的动态参数、修饰符和缩写，展示了如何利用这些功能实现动态渲染和数据驱动的用户界面。

Vue 2插值详解

Vue.js 2 提供了强大的模板语法，允许你在HTML模板中插入动态数据，这部分通常被称为插值。插值是Vue模板语法的核心，用于将数据绑定到DOM中，实现动态渲染。以下是对Vue 2模板语法的插值部分的多方面详细介绍。

文本插值

文本插值是Vue 2中最常见的插值方式，它使用双大括号{ { }}将数据绑定到模板中。

<p>{
  
  { message }}</p>

在这个示例中，message 是一个数据属性，它将在模板中动态渲染出来。

原始HTML

如果你需要渲染原始的HTML代码，而不是纯文本，你可以使用v-html 指令。

<p v-html="rawHtml"></p>

在这个示例中，rawHtml 数据属性包含HTML代码，它会被解析并渲染为DOM元素。

表达式

在插值中，你也可以使用JavaScript表达式，以便对数据进行处理。表达式在双大括号内使用，Vue会在编译时将它们解释为JavaScript代码。

<p>{
  
  { message.toUpperCase() }}</p>

在这个示例中，toUpperCase() 方法将 message 数据属性的值转换为大写字母。

过滤器

Vue 2允许你使用过滤器来格式化数据输出。过滤器可以在插值中使用，以便在显示数据之前对其进行处理。

<p>{
  
  { message | capitalize }}</p>

Vue.filter('capitalize', function(value) {
   
   
  if (!value) return '';
  value = value.toString();
  return value.charAt(0).toUpperCase() + value.slice(1);
});

在这个示例中，capitalize 过滤器用于将 message 数据属性的值首字母大写。

计算属性

最低0.47元/天解锁文章