# Interpolation
# Interpolate text
# Input:
<template>
<p>{{ name }}</p>
</template>
<script>
export default {
data() {
return {
name: 'The Tiger King'
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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: 1Normal 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# Output:
All the big cats: 49