Cómo concatenar dos cadenas en Vue

Cómo concatenar dos cadenas en Vue

En este tutorial, aprenderemos cómo concatenar dos cadenas en Vue.js usando ejemplos.

Considere que tenemos la siguiente cadena img y url en el código Vue:

<template>
  <div id="app">
    <img src="" />
  </div>
</template>

<script>
export default {
  data(){
    url: "https://reactgo.com"
    img: "/img/car.png"
  }
};
</script>

Ahora necesitamos concatenar por encima de dos cadenas.

Concatenar dos cadenas en Vue

Para concatenar las dos cadenas en vue, podemos usar la directiva v-bind seguida de las dos cadenas.

EL v-bind La directiva vincula dinámicamente el atributo a una expresión de javascript.

Aquí un ejemplo:

<template>
  <div id="app">
    <img v-bind:src="url + img" />
  </div>
</template>

<script>
export default {
  data(){
    url: "https://reactgo.com"
    img: "/img/car.png"
  }
};
</script>

En el código anterior, usamos la directiva v-bind para vincular el atributo a una variable de JavaScript y usamos la mayoría + para unir las dos cuerdas.

De manera similar, podemos usar literales de plantilla es6 para concatenar cadenas en Vue.

<template>
  <div id="app">
    <img v-bind:src="`${url}/img/car.png`" />
  </div>
</template>

<script>
export default {
  data(){
    url: "https://reactgo.com"
  }
};
</script>

también podemos usar la propiedad abreviada de la directiva v-bind de esta manera:

Si quieres conocer otros artículos parecidos a Cómo concatenar dos cadenas en Vue puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas