Vue-熟悉DOM元素控制快速應用到實際開發-二部曲
阿新 • • 發佈：2018-11-11
<html> <head> <title>HelloWorld</title> <script src="../vue.js"></script> </head> <body> <div id='demo-content'> <div>{{ HelloWorld }}</div> <!-- v-on:click.stop v-on:click.prevent v-on:click.capture v-on:click.self v-on:click.once v-on:click.passive --> <button v-on:click="setHelloWorld('漂亮的你')">You're Beautiful</button> <span v-if="success">成功</span> <span v-else-if="!success">失敗></span> <form v-on:submit="newsSearch()"> <!--v-on:keyup.alt v-on:keyup.enter--> <input v-bind:type="type" v-bind:value="HelloWorld" v-on:keyup=""/> <input type="submit" value="搜尋"/> </form> <ul><li v-for="val in subject"> 編號：{{val.id}} ，名稱：{{val.name}} </li></ul> </div> <script> var vm = new Vue({ el: '#demo-content', data: { HelloWorld: '你好世界！', type: 'search', success: true, subject: [{ id:1,name:"語文" },{ id:2,name:"數學" },{ id:3,name:"英語" }] }, methods: { setHelloWorld: function(val) { this.HelloWorld = val; }, newsSearch() { alert(this.HelloWorld); } }, computed: { } }); </script> </body> </html>