美文网首页
2018-09-12/13

2018-09-12/13

作者: 酒窝仙女 | 来源:发表于2018-09-14 10:34 被阅读0次

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

屏幕显示:刷新页面随机出现其一 9.png

10.png

相关文章

网友评论

      本文标题:2018-09-12/13

      本文链接:https://www.haomeiwen.com/subject/aheugftx.html