Vue基础学习之DOM操作

 1 demo：
 2     <div id="app">
 3         <header v-bind:title="message" v-bind:class="headerClass">{{message}}</header>
 4         <section>
 5             <p v-if="change==‘a‘">如果change等于a，我就会显示</p>
 6             <p v-else-if="change==‘b‘">如果change等于b，我就会显示</p>
 7             <p v-else>如果change不等于a也不是b，我就会显示</p>
 8             <ul>
 9                 <li v-for="i in itemTest">{{i}}</li>
10             </ul>
11             <button v-on:click="btnClick">点击就会弹窗</button>
12             <br/><br/>
13             <input type="text" name="inputInfo" v-model="inputInfo">  <span>您输入的信息为：{{inputInfo}}</span>
14         </section>
15         <br/><br/>
16     </div>
17 
18     <script>
19         var app=new Vue({
20             el:"#app",
21             data:{
22                 message:"我的第一个vue实例",
23                 headerClass:"textTitle",
24                 change:"a",
25                 itemTest:["橘子","桃子","梨子","栗子","李子"],
26                 inputInfo:"我的第一个vue输入实例"
27             },
28             methods:{
29                 btnClick:function(){
30                     alert("vue可以监听DOM事件")
31                 }
32             }
33         })
34     </script>