1.v-for

v-for ： 指令根据一组数组的选项列表进行渲染。（循环操作）
例： v-for=“”

2.v-model

v-mode ： 双向数据绑定(主要用于表单元素)
例： 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:事件=‘函数名’
例 ： v-on:click=‘函数名’ 【简写 ： @click=‘ ’】

<div id="itany">
            <!--点击按钮-->
            <button v-on:click="alt">点击</button>
        </div>
        <script type="text/javascript">
            var a=new Vue({
                el:"#itany",
                data:{
                    mes:"hello Kity"
                },
                methods:{//主要用来存放函数
                    alt:function(){
                        //console.log(this.mes)
                        console.log(a.mes)
                    }
                }
            })
        </script>

点击按钮切换

<div id="itany" v-for="{{mse}}">
       {{mse}}
    <button v-on:click="att">点击</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 : 绑定一个属性
写法 ： v-bind：属性名=‘’ 【简写：属性名=‘值’】

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

下标图片切换

<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>

逻辑运算符

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条件不成立时执行
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:{
//              随机数公式： num:Math.floor(Math.random()*(max-min+1)+min)
               num:Math.floor(Math.random()*(4-0+1)+0)
           }
       })
    
    
    </script>