2018-09-12

v-model:双向数据绑定，用于表单元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="itany">
       <input type='text' v-model='name'>
        <p>{{name}}</p>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#itany',
            data:{
                name:'lzgxh',
                num:''
            }
        })
    </script>
</body>
</html>

屏幕展示： 1.png

v-on:事件名="函数名" (v-on:click="alt")；绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="itany">
        <button v-on:click='alt'>按钮</button>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#itany',
            data:{
                msg:'hollo'
            },
            methods:{
                alt:function(){
                    alert(000)
                    console.log(this.msg)
                }
            }
        })
    </script>
</body>
</html>

屏幕展示： 2.png

v-on:click="函数名"，点击按钮来回切换；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="itany">
        <p>{{msg}}</p>
        <button v-on:click='h'>on</button>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#itany',
            data:{
                msg:'heihei',
                flag:true
            },
            methods:{
                h:function(){
                  /* this.msg='aaa' */
                    if(this.flag){
                        this.msg='idh',
                        this.flag=false
                    }else{
                        this.msg='heihei',
                        this.flag=true
                    }
                }
            }
        })
    </script>
</body>
</html>

屏幕展示： 3.png

4.png

v-model=''; v-on:click='函数名'; v-for=''

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='itany'>
       <input type="text" v-model='txt'>  <button v-on:click='add'>添加</button>
       <ul>
           <li v-for="(value,index) in arr">
              {{value}}
              <button v-on:click='delt(index)'>删除</button>
           </li>
       </ul>
   </div>
    <script src="vue.js"></script>
    <script>
    
       new Vue({
           el:'#itany',
           data:{
               arr:['吃饭','睡觉','打游戏'],
               txt:''
           },
           methods:{
               add:function(){
                   this.arr.push(this.txt),
                    this.txt=''
               },
               delt:function(ind){
                   this.arr.splice(ind,1)
               }
           }
       })
    </script>
</body>
</html>

屏幕展示：效果:点击添加删除

5.png

2018-09-13

v-bind:属性名="值"; v-bind:src="url"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="itany">
        <img v-bind:src="url">
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#itany',
            data:{
                url:'icon1.png'
            }
        })
    </script>
</body>
</html>

屏幕显示：用v-bind:src='url'添加一张图片

v-bind:src='url',v-on:click='函数名'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="itany">
        <img v-bind:src="url" alt="" v-on:click='hs'>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#itany',
            data:{
                url:'icon1.png'
            },
            methods:{
                hs:function(){
                    this.url="page2-img1.jpg"
                }
            }
        })
    </script>
</body>
</html>

屏幕显示：点击图片来回切换

v-bind:src='url',v-on:click='函数名' ，v-for=''循环数组对象数组对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="itany">
        <img v-bind:src="url" alt="">
        <ul>
            <li v-for='(value,index) in arr' v-on:click='cha(index)'>{{index+1}}</li>
        </ul>
    </div>
    <script src="vue.js"></script>
    <script> 
        new Vue({
            el:'#itany',
            data:{
               arr:['s5.jpg','s6.jpg','s7.jpg','s8.jpg','s9.jpg'],
               url:'s5.jpg'
            },
            methods:{
                cha:function(i){
                   this.url=this.arr[i]
                }
            }
        })
    </script>
</body>
</html>

选项卡：点击数字来回切换图片

6.png

v-show=‘’ 控制元素的显示和隐藏使用display:none隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="itany">
        <h1>{{one}}</h1>
        <h3 v-show='!two'>{{two}}</h3>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#itany',
            data:{
                one:'good',
                two:true
            }
        })
    </script>
</body>
</html>

屏幕展示： 7.png

v-on:click='函数名'， v-show=''控制元素的现实和隐藏使用display:none隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #a{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="itany">
       <button v-on:click='ch'>点击</button>
        <div id="a" v-show='see'></div>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#itany',
            data:{
                see:true
            },
            methods:{
                ch:function(){
                    this.see=!this.see
                }
            }
        })
    </script>
</body>
</html>

屏幕显示：效果：点击按钮（隐藏显示）

8.png

v-if=''

v-else-if=''

v-else=''

[随机出现：num:Math.floor(Math.random()*(max-min+1)+min)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='itany'>
       <p v-if='num==0'>00000000000</p>
       <p v-else-if='num==1'>1111111111</p>
       <p v-else-if='num==2'>22222222</p>
       <p v-else='num==5'>555555555555</p>
      
   </div>
    <script src="vue.js"></script>
    <script>
    
       new Vue({
           el:'#itany',
           data:{
//               num:Math.floor(Math.random()*(max-min+1)+min)
               num:Math.floor(Math.random()*(5-0+1)+0)
           }
       })
    </script>
</body>
</html>