Vue.js---demo(一)
阿新 • • 發佈：2018-11-28
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Vue demo</title> <link href="css/bootstrap.css" rel="stylesheet"/> <link href="css/bootstrap-responsive.css" rel="stylesheet"/> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.js"></script> <script src="js/vue.js"></script> <style> .container { background-color: gainsboro; } </style> </head> <body> <div id="app1" class="container"> <!--<my-component></my-component>--> <div class="form-horizontal"> <template v-if="type==='name'"> <div class="control-group"> <label for="name" class="control-label">name:</label> <div class="controls"> <input type="text" id="name" placeholder="enter your name" key="input-name"> </div> </div> </template> <div v-show="type!=='name'"> <div class="control-group"> <label for="email" class="control-label">email:</label> <div class="controls"> <input type="text" id="email" placeholder="enter your email" key="input-email"/> </div> </div> </div> <div class="control-group"> <div class="controls"> <button @click="change()">change style</button> </div> </div> </div> </div> <script> var Vue = new Vue({ el: '#app1', data: { type: 'name' }, methods: { change: function () { this.type = this.type === 'name' ? 'email' : 'name' } }, components: {} }) </script> </body> </html>