<div id="app">
<p>computed: {{ total }}</p>
<p>computed: {{ total }}</p>
<p>computed: {{ total }}</p>
<p>computed: {{ total }}</p>
<p>computed: {{ total }}</p>
<p>methods: {{ add() }}</p>
<p>methods: {{ add() }}</p>
<p>methods: {{ add() }}</p>
<p>methods: {{ add() }}</p>
<p>methods: {{ add() }}</p>
</div>
.red {
padding: 1rem;
border: 3px solid red
}
const { createApp, ref, computed } = Vue;
const app = createApp({
setup() {
const num1 = ref(2);
const total = computed(() => {
console.log('computed');
return num1.value * 2
})
const add = () => {
console.log('methods');
return num1.value * 2
}
return {
total,
add
}
}
});
app.mount('#app');
This Pen doesn't use any external CSS resources.