screen_rotation
Copied to Clipboard
<html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3>Vue Js concat string and varibale</h3> <p>{{ message }}</p> <p>{{ concatenatedString }}</p> </div> <script type="module"> const app = new Vue({ el: "#app", data() { return { name: 'John', age: 30 }; }, computed: { message() { return `Hello, ${this.name}!`; // Concatenating a string and a variable }, concatenatedString() { return `My name is ${this.name} and I am ${this.age} years old.`; // Concatenating multiple variables } } }); </script> <style> #app { text-align: center; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24); width: 600px; margin: 0 auto; padding: 20px; } /* CSS for the heading */ h3 { font-size: 24px; color: #333; margin-bottom: 10px; } /* CSS for the paragraphs */ p { font-size: 18px; color: #555; margin-bottom: 5px; } /* CSS for the interpolated message */ p:first-child { color: #ff5722; } /* CSS for the concatenated string */ p:last-child { font-weight: bold; } </style> </body> </html>