2018-09-12/13

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
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 28,403评论 1赞 45
  • 北京天安门
    北京天安门，做为中国国家的象征，一直以来在国人的心中被神往着，敬仰着。特别是我们这些从小唱着《我爱北京天安门》长大...
    岁月如歌9267阅读 1,841评论 0赞 0
  • 练字
    好久没有写，今日得空，练练手。
    瞳瞳日中的微笑阅读 1,526评论 4赞 2
  • 门店经营必须做到的四点
    很多人都遇到辛辛苦苦投资了一个门店，门店刚刚开业几个月，效益就不断下降，到了最后基本没有客人来访店铺，怎么办？其实...
    一段金子阅读 3,899评论 0赞 1
  • 可能你的时间还没有一只粽子值钱？
    本文系更好时代原创出品，由更好时代签约作者「苏溪」执笔，于2017年5月31日全网首发，正文计1124字，预计阅读...
    更好时代阅读 1,234评论 0赞 0

友情链接更多精彩内容