vue中如何实现变量和字符串拼接

整理文档，搜刮出一个vue中如何实现变量和字符串拼接的代码，稍微整理精简一下做下分享。

在data中定义变量：

data() {
  return {
    a: 'A'
  }
}

如何通过按钮点击实现字符串和变量a的拼接呢？

<button @click='showMsg'></button>
//vue
methods: {
  showMsg() {
    alert(`获取了${a}`);
  }
}

注意alert()里不是单引号，而是两个 ` 号（esc下面的按键）。

点击按钮出现

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue语法之拼接字符串的示例代码

    vue语法之拼接字符串的示例代码

    本文介绍了vue语法之拼接字符串的示例代码,分享给大家,具体如下. 先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind:src="['xxx(需要拼接的字符串)'+item.picurl]" alt="" width="100%" height="245" /> </d

  • vue中如何实现变量和字符串拼接

    vue中如何实现变量和字符串拼接

    整理文档,搜刮出一个vue中如何实现变量和字符串拼接的代码,稍微整理精简一下做下分享. 在data中定义变量: data() { return { a: 'A' } } 如何通过按钮点击实现字符串和变量a的拼接呢? <button @click='showMsg'></button> //vue methods: { showMsg() { alert(`获取了${a}`); } } 注意alert()里不是单引号,而是两个 ` 号(esc下面的按键). 点击按钮出现 以上就是本文

  • React和Vue中监听变量变化的方法

    React 中 本地调试React代码的方法 yarn build 场景 假设有这样一个场景,父组件传递子组件一个A参数,子组件需要监听A参数的变化转换为state. 16之前 在React以前我们可以使用 componentWillReveiveProps 来监听 props 的变换 16之后 在最新版本的React中可以使用新出的 getDerivedStateFromProps 进行props的监听, getDerivedStateFromProps 可以返回 null 或者一个对象,如果

  • 为什么vue中不建议使用空字符串作为className

    目录 比较空字符串''和null 情况1:使用空字符串'' 情况2:使用null 情况3:使用undefined 使用对象的形式绑定class 使用 &&绑定class 案例1:isBold为false 案例2:isBold为null 空class就一定不对吗? 在我们用三元表达式给DOM元素设置class时,使用空字符串,会导致渲染出一个没有值的空class, 为了避免这种情况出现,可以使用null来代替空字符串. <!-- ❌ --> <div :class=&quo

  • Java中list.foreach不能使用字符串拼接的问题

    Java中list.foreach不能使用字符串拼接的问题

    目录 list.foreach不能使用字符串拼接 如图,不能使用String进行拼接 foreach循环中不能使用字符串拼接 问题 解决 原理    lambda表达式使用局部变量要用final list.foreach不能使用字符串拼接 如图,不能使用String进行拼接 因为Lambda的本质实际上是匿名内部类,所以t必须是final类型(不过代码中的final可以省略),是不可以重新赋值的. 可以使用 final StringBuilder str = new StringBuilder(

  • 详解.NET中string与StringBuilder在字符串拼接功能上的比较

    string与StringBuilder的在字符串拼接时执行效率上有差异,因为StringBuilder类中用了一个技巧:它申请了两倍的内存空间存放字符串,在调用Append方法拼接字符串时,会先检查剩余的空间是否能放下要拼接的字符串,若能放下,则将要拼接的字符串Copy到剩余的空间中,若不能放下,则再申请拼接后的字符串两倍的长度空间,将当前字符串Copy到新的空间中(除了两倍的空间外,这点跟string的拼接没有太多的差异).因此StringBuilder能提高字符串拼接的效率在于它减少了申请

  • Java 字符串拼接竟然有这么多姿势(收藏版)

    但扪心自问,在我做程序员的前两年内,我也不知道为啥.遇到字符串拼接就上"+"号操作符,甭管是不是在循环体内.和小菜比起来,我当时可没他这么幸运,还有一位热心的"二哥"能够分享这份价值连城的开发手册. 既然我这么热心分享,不如好人做到底,对不对?我就认认真真地写一篇文章,给小菜解惑一下. 01."+"号操作符 要说姿势,"+"号操作符必须是字符串拼接最常用的一种了,没有之一. String chenmo = "沉默&q

  • Vue中Mixin&extends的详细使用教程

    Vue中Mixin&extends的详细使用教程

    目录 认识Mixin 官方定义Mixin 项目中如何使用Mixin 官方定义extends 项目中使用extends 总结 认识Mixin 目前我们使用组件化开发方式来开发应用程序,但是在不同组件之间存在一些相同的代码逻辑,此时我们希望对相同的代码逻辑进行抽取. 在vue2和vue3中都支持使用Mixin来解决,Mixin提供了一种非常灵活的方式,来分发Vue组件中的可复用功能,一个Mixin对象可以包含任何组件选项,当组件使用Mixin对象时,所有Mixin对象的选项将被 混合 进入该组件本身

  • Python字符串拼接的4种方法实例

    目录 1. 算术运算符拼接 (1)+算术运算符 (2) * 算术运算符 2.format方法 3.百分号操作符 4.特殊符号f 附:常见字符串去除空格的方法总结 总结 在程序实际应用中,少不了要进行字符串拼接的操作.下面介绍一下Python语言中四种字符串拼接的方式. 1. 算术运算符拼接 在Python中算术运算符一共有七种种,分别是+.-.*././/.**和%.其中+和*不仅可以用来进行算数计算,也可以用来字符串拼接. (1)+算术运算符 +运算符在Python中可以用作数学计算,例如:

  • 深入讲解SQL中的字符串拼接

    深入讲解SQL中的字符串拼接

    一.概述 相信大家在日常开发中,在SQL语句中经常需要进行字符串拼接,以sqlserver,oracle,mysql三种数据库为例,因为这三种数据库具有代表性. sqlserver: select '123'+'456'; oracle: select '123'||'456' from dual; 或 select concat('123','456') from dual; mysql: select concat('123','456'); 注意:SQL Server中没有concat函数

  • javascript中字符串拼接详解

    最近在研究<javascript高级程序设计>中,有一段关于字符串特点的描述,原文大概如下:ECMAScript中的字符串是不可变的,也就是说,字符串一旦创建,他们的值就不能改变.要改变某个变量的保存的的字符串,首先要销毁原来的字符串,然后再用另外一个包含新值的字符串填充该变量,例如: 复制代码 代码如下: var lang = "Java"; lang = lang + "Script"; 实现这个操作的过程如下:首先创建一个能容纳10个字符的新字符串

随机推荐