demo of vue.js v-text/computed property https://bswen.com/2021/03/others-learn-vuejs-with-me-tutorial-3.html
| <html> | |
| <head> | |
| <title>Vue.js Pet Store</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" | |
| crossorigin="anonymous"> | |
| </head> | |
| <body> | |
| <div id="app" class="container-fluid"> | |
| <div class="row-fluid"> | |
| <h1 v-text="sitename"/> | |
| <h3 v-text="siteDesc"/> | |
| <h5 v-text="welcomeDesc"/> | |
| </div> | |
| <div class="row-fluid"> | |
| <input type="text" v-model="userName"/> | |
| </div> | |
| </div> | |
| <script> | |
| var myStore = new Vue({ | |
| el: "#app", | |
| data: { | |
| sitename: "Vue.js Pet Store", | |
| siteDesc: "bswen tutorial for vue.js", | |
| userName: "" | |
| }, | |
| computed: { | |
| welcomeDesc: function () { | |
| return this.userName+ ", welcome to "+ this.sitename+", "+this.siteDesc; | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment