Skip to content

Instantly share code, notes, and snippets.

@underdogbytes

underdogbytes/vueChangeTextWithButton

Last active September 8, 2020 17:37
Show Gist options
  • Save underdogbytes/ac58a7a67fb92b3ad8fbe1fe942a5176 to your computer and use it in GitHub Desktop.
Save underdogbytes/ac58a7a67fb92b3ad8fbe1fe942a5176 to your computer and use it in GitHub Desktop.
Download ZIP
Vue.js: how to change a text directly without a method or how to change a text using a method?
Raw
vueChangeTextWithButton
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Little Vue Store!</title>
<!-- vue cdn -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ text }}</p>
<button v-on:click="text = 'New Text'">Change Text</button>
<p>{{ textToChangeWithMethod }}</p>
<button v-on:click="changeTitle()">Change title using a method</button>
</div>
<script>
new Vue({
el: '#app',
data: {
text: "I'm a text that will be changed directly",
textToChangeWithMethod: "I'm a text that will be changed using a method :)"
},
methods: {
changeTitle(){
this.textToChangeWithMethod = 'Changed text using a method'
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment