2018-09-15

作者: 梁小狗 | 来源:发表于2018-09-15 08:40 被阅读0次

面试：JavaScript进阶篇
学习强国|大国名医：张仲景
2018-09-18
做精致女人&享性福人生
附录C：SQL 语言的分类
应该改变的是企业家的”心“
电影记录
逻辑思维（五）
张苗的周检视
喜欢的文章21

1.图片来回切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id='itany'>
// 用v-bind来绑定一个属性
    <img v-bind:src="url" alt="" v-on:click='b'>
</div>
<script src='js/vue.js'></script>
<script>
    new Vue({
        el:"#itany",
        data:{
            url:'img/1.jpg',
            flag:true

        },
//用if时间使图片来回循环
        methods:{
            b:function(){
                if(this.flag){
                    this.url='img/2.jpg';
                    this.flag=false;
                }else{
                    this.url='img/1.jpg';
                    this.flag=true
                }
            }
        }
    })
</script>
</body>
</html>

2.用v-show制作选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 给一下属性 添加效果    
 <style>

        ul{
            overflow: hidden;
        }
        li{
            list-style: none;
            width:60px;
            border:1px solid #000;
            text-align: center;
            float:left;
        }
    </style>
</head>
<body>
<div id='itany'>
    <img v-bind:src="url" alt="">
利用for循环   点击事件   还有index+1  下标加一  从零开始   0+1
    <ul>
        <li v-for="(value,index) in list" v-on:click='chg(index)'>{{index+1}}</li>
    </ul>
</div>
<script src='js/vue.js'></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            url:'img/1.jpg',
            list:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg']
        },
给一个函数  执行里面的代码话
        methods:{
            chg:function(ind){
                this.url=this.list[ind]
            }
        }
    })

</script>
</body>
</html>

3.隐藏文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id='itany'>
//msg代替html里的标签
    <p>{{msg}}</p>
    <h1 v-show="!see">{{msg}}</h1>
</div>
<script src='js/vue.js'></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            msg:'hello vue',
            see:true
        }
    })
</script>
</body>
</html>

4.点击button隐藏显示图片

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background: #f00;
        }

    </style>
</head>
<body>
<div id='itany'>
    <button v-on:click='chg'>点击切换</button>
    <div class='box' v-show='see'></div>
</div>
<script src='js/vue.js'></script>
<script>

    new Vue({
        el:'#itany',
        data:{
            see:true
        },
        methods:{
            chg:function(){
//                  if(this.see==true){
//                       this.see=false;
//                  }else{
//                       this.see=true;
//                  }

                this.see=!this.see


            }
        }

    })
</script>
</body>
</html>

5.v-if v-els v-else-if的运用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='itany'>
<p v-if="num==0">0000000000000000</p>
<p v-else-if="num==1">111111111111</p>
<p v-else-if="num==2">2222222222222</p>
<p v-else-if="num==3">333333333333</p>
<p v-else-if="num==4">444444444444</p>
<p v-else='num==5'>55555555555555555</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()(5-0+1)+0)
}
})