vue课件day02继续vue指令

1.v-on:click = "btn"  也可以简写 @click="btn2"(绑定事件)

  <div id="app">
        <input type="button" value="点击" v-on:click="btn">
        <input type="button" value="点击按钮" @click="btnone">
   </div>
    <script>
     let vm=new Vue({
         el:"#app",
         data:{
         },
         methods:{
            btn(){
                alert("111");
            },
            btnone(){
                alert("能不能出来")
            }
         }
     })
    </script>

2.v-bind:src ='imgurl' 可以简写 :src='imgurl'  (可以绑定任何属性)

 <div id="app">
        <img v-bind:src="imgurl" alt="">
        <img :src="imgurl" alt="">
        <ul v-for="item in listnum">
            <li>{{item}}</li>
        </ul>
        <ul v-for="(item,x) in listnum" :key="x">
            <li>{{item}}</li>
        </ul>
   </div>
    <script>
     let vm=new Vue({
         el:"#app",
         data:{
             imgurl:'11.jpg',
             listnum:["床前明月光，","疑是地上霜","举头望明月","低头思故乡"],
         },
         methods:{
            btn(){
                alert("111");
            },
            btnone(){
                alert("能不能出来")
                
            }
         }
     })
    </script>

3.   v-model="message" （双向数据绑定）

 <div id="app">
        <input type="text" v-model="message">
        {{message}}

   </div>
    <script>
     let vm=new Vue({
         el:"#app",
         data:{
             message:'',
         },
     })
    </script>

4. v-if ='布尔'  可以思考一下和v-show的区别

<div id="app">
      <div v-if="state">未登录</div>
      <div v-else>已登录</div>
      <div v-if=" num>10"> 数字比10大</div>
      <div v-else-if="num<10"> 数字比10小</div>
      <!-- <div v-if="num==10"> 数字和10一样大</div> -->
      <div v-else> 数字和10一样大</div>
     </div>
     <script type="text/javascript">
      let vm = new Vue({
       el:"#app",
       data:{
        state:true,
        num:15
       }
      })
     </script>

注意：切换比较频繁的时候用v-show，如果需要销毁长时间不用就用v-if