screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/vue@3.2.12/dist/vue.global.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <div id="app"> <h3>Vue Js change or update first value of array</h3> <p>Original Array: {{ myArray }}</p> <button @click="updateFirstValue(10)">Update First Value</button> </div> <script type="module"> const app = Vue.createApp({ data() { return { myArray: [1, 2, 3, 4, 5] } }, methods: { updateFirstValue(newValue) { this.myArray.splice(0, 1, newValue); } } }); app.mount('#app'); </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; transition: transform 0.3s ease; } h3 { font-size: 24px; margin-bottom: 20px; } </style> </body> </html>