1.v-for

v-for ： 指令根據(jù)一組數(shù)組的選項(xiàng)列表進(jìn)行渲染。（循環(huán)操作）
例： v-for=“”

2.v-model

v-mode ： 雙向數(shù)據(jù)綁定(主要用于表單元素)
例： v-mode=“”

<div id="xianqi">
            <input type="text"  v-model="mes">
            <p>{{mes}}</p>
</div>
<script type="text/javascript">
        new Vue({
        el:"#xianqi",
        data:{
            mes:''
        }
    })
</script>

3.v-on

v-on:事件=‘函數(shù)名’
例 ： v-on:click=‘函數(shù)名’ 【簡(jiǎn)寫 ： @click=‘ ’】

<div id="itany">
            <!--點(diǎn)擊按鈕-->
            <button v-on:click="alt">點(diǎn)擊</button>
        </div>
        <script type="text/javascript">
            var a=new Vue({
                el:"#itany",
                data:{
                    mes:"hello Kity"
                },
                methods:{//主要用來存放函數(shù)
                    alt:function(){
                        //console.log(this.mes)
                        console.log(a.mes)
                    }
                }
            })
        </script>

點(diǎn)擊按鈕切換

<div id="itany" v-for="{{mse}}">
       {{mse}}
    <button v-on:click="att">點(diǎn)擊</button>
</div>      
<script type="text/javascript">
    new Vue({
    el:"#itany",
    data:{
            mse:'hello kity',
        may:'hello',
    },
    methods:{
        att:function(){
            this.mse=this.may
        }
    }
})  
</script>

4.v-bind

v-bind : 綁定一個(gè)屬性
寫法 ： v-bind：屬性名=‘’ 【簡(jiǎn)寫：屬性名=‘值’】

<div id="itany">
    <img v-bind:src="url" alt="" />
</div>
<script type="text/javascript">
    new Vue({
        el:'#itany',
        data:{
            url:'images/1.jpg'
             }
                    
    })
</script>

下標(biāo)圖片切換

<div id="itany">
    <img v-bind:src="url" alt="" />
<ul>
    <li v-for="(value,index) in urls" v-on:click="art(index)">{{index+1}}</li>
</ul>

</div>
        
<script type="text/javascript">
        new Vue({
              el:'#itany',
            data:{
                url:'images/1.jpg',
                urls:['images/1.jpg','images/2.jpg','images/3.jpg']
            },
            methods:{
                art:function(ind){
                    this.url=this.urls[ind]
                }
                }
        })
</script>

5.v-show

v-show : 控制元素顯示或隱藏 （用display：none 來隱藏）
例： v-show=“”

v-show="true/false" 控制元素顯示/隱藏

<div id="itany">
    <p>{{arr}}</p>
    <h2 v-show="!arrs">{{arr}}</h2>
</div>
        
<script type="text/javascript">
    new Vue({
         el:'#itany',
        data:{
            arr:'hello',
            arrs:ture
        }
    })
</script>

邏輯運(yùn)算符

1. ! (非)
2. && （與） 有假畢假
3. || (或) 有真則真

隱藏顯示

<div id="itany">
    <button v-on:click="alt">隱藏顯示</button>
         <div class="box" v-show="arr"></div>           
</div>
        
<script type="text/javascript">
    new Vue({
            el:'#itany',
            data:{
                arr:true
            },
            methods:{
                alt:function(){
                this.arr=!this.arr
                    }
            }
                
    })
</script>

6.v-if， v-else-if ， v-else

v-if : 控制元素顯示或隱藏 ( 用visibility:hiodden 來隱藏)
v-else ： v-else要緊跟在v-if后面，表示v-if條件不成立時(shí)執(zhí)行
v-else-if ： 表示多次，在v-if和v-else中間

   <div id='itany'>
       <p v-if="num==0">易烊千璽</p>
       <p v-else-if="num==1">王鶴棣</p>
       <p v-else-if="num==2">官鴻</p>
       <p v-else-if="num==3">梁靖康</p>
       <p v-else='num==4'>吳希澤</p>
   </div>
    <script src="js/vue.js"></script>
    <script>
       new Vue({
           el:'#itany',
           data:{
//              隨機(jī)數(shù)公式： num:Math.floor(Math.random()*(max-min+1)+min)
               num:Math.floor(Math.random()*(4-0+1)+0)
           }
       })
    
    
    </script>