欢迎使用CSDN-markdown编辑器

来源：互联网发布：设计家具的软件编辑：程序博客网时间：2024/06/15 19:48
VUE.js [demo]

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body>        <!--01-->        <div id="app1">          {{ message }}        </div>        <!--02-->        <div id="app2">          <p >{{message+err.tect}}</p>          <input v-model="err.tect">        </div>       <!--03 -->        <div id="app3">          <ul>            <li v-for="todo in todos">              {{ todo.text}}            </li>          </ul>        </div>       <!--04-->          <div id="app4">          <p>{{ message }}</p>          <button v-on:click="reverseMessage">Reverse Message</button>        </div>       <!--05-->          <div id="app5">          <input v-model="newTodo" v-on:keyup.enter="addTodo">          <ul>            <li v-for="todo in todos">              <span>{{ todo.text }}</span>              <button v-on:click="removeTodo($index)">X</button>            </li>          </ul>        </div>    </body>    <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>    <script type="text/javascript" src="js/vue.js" ></script>    <script>        window.onload=function(){        //01        new Vue({              el: '#app1',              data: {                message: 'Hello Vue.js!'              }            })        //02            new Vue({            el: '#app2',            data: {            message: 'Hello Vue.js!',            err: {tect:"dsf"}            }           })         //03        new Vue({              el: '#app3',              data: {                todos: [                  { text: 'Learn JavaScript',text_1: 'Learn Vue.js' },                  { text: 'Learn Vue.js' },                  { text: 'Build Something Awesome' }                ]              }            })         //04         new Vue({              el: '#app4',              data: {                message: 'Hello Vue.js!'              },              methods: {                reverseMessage: function () {                  this.message = this.message+"2222";                }              }            })         //05        new Vue({          el: '#app5',          data: {            newTodo: '',            todos: [              { text: 'Add some todos11111' },               { text: 'Add some todos2222' }            ]          },          methods: {            addTodo: function () {              var text = this.newTodo.trim()              if (text) {                this.todos.push({ text: text })                this.newTodo = ''              }            },            removeTodo: function (index) {              this.todos.splice(index, 1)            }          }        })                      };    </script></html>
0 0