OverVue.dev

# Interpolation

# Interpolate text

# Input:


 





 





<template>
  <p>{{ name }}</p>
</template>
<script>
export default {
  data() {
    return {
      name: 'The Tiger King'
    }
  }
}
</script>

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12

# Output:

The Tiger King

# v-pre and v-once

# Input:



 
 
 














<template>
  <div>
    <p v-pre>With v-pre, this is not be interpolated: {{ counter }}</p>
    <span v-once>With v-once, this will not be updated: {{ counter }}</span>
    <p>Normal interpolation: {{ counter }}</p>
    <button @click="counter++">+1</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      counter: 1
    }
  }
}
</script>

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Output:

With v-pre, this is not be interpolated: {{ counter }}

With v-once, this will not be updated: 1

Normal interpolation: 1

# Interpolate some JavaScript

You can use simple JS expression:

# Input:


 












<template>
  <p>All the big cats: {{ tigerKing + carolBaskin }}</p>
</template>
<script>
export default {
  data() {
    return {
      tigerKing: 26,
      carolBaskin: 23
    }
  }
}
</script>

  
        Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13

# Output:

All the big cats: 49

See the official Vue.js doc

← Computed Properties →