代码:
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <title>标题</title> </head> <body> <div id="app1" @click="handleClick"> <span>{{message}}</span> <input type="text" v-bind:value="myValue"/> <p v-if="seen">现在你看到我了</p> <ul> <li v-for="hobby in hobbies"> {{ hobby.text }} </li> </ul> </div> </body> </html> <script type="text/javascript"> <!-- // 脚本 var app = new Vue({ el: '#app1', data: { message: 'Hello Vue!', myValue:'19491001', seen:true, hobbies: [ { text: '抽烟' }, { text: '喝酒' }, { text: '烫头' } ] }, methods:{ handleClick:function(){ alert(1); } } }) //--> </script>
效果:
这个Vue用Editplus也可以调试,这还不错。
END