2018-09-14 vue 三

一、v-bind

    主要用于绑定属性,可简写为:属性名='值'。
 例一     (图片切换):
   <div id="app">
        <img v-bind:src="url" v-on:click="alt"/>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el :"#app",
            data :{
                url:"img/6.jpg",
                flag:true
            },
            methods:{
                alt:function(){
                    if(this.flag){
                        this.url='img/7.jpg';
                        this.flag=false
                    }else{
                        this.url='img/6.jpg';
                        this.flag=true
                    }
                }                   
            }
            
        })
    </script>

例二、(选项卡)
      <div id="app">
        <img v-bind:src="url" alt="">
        <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: '#app',
            data: {
                url: 'img/6.jpg',
                list: ['img/6.jpg', 'img/7.jpg', 'img/8.jpg', 'img/9.jpg', 'img/10.jpg']

            },
            methods: {
                chg: function(ind) {
                    this.url = this.list[ind]
                }
            }

        })
    </script>

二、v-show ( display:none), v-if (visibility:hidden); 都用于 控制元素的显示与隐藏

   例一:
           <div id="app">
        <p>{{msg}}</p>
        <h1 v-show="!see">{{msg}}</h1>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'v-show 控制元素的显示与隐藏',
                see: true

            }
        })
    </script>

   例二 、
           <div id="app">
        <button v-on:click="alt">点击显示隐藏</button>
        <div class="box" v-show="see"></div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                see:true
            },
            methods:{
                alt:function(){
                    /*  方法一
                     * this.see=!this.see*/
                    
                    /*方法二*/
                    if(this.see){
                        this.see=false
                    }else{
                        this.see=true
                    }
                }
            }
        })
    </script>

     注: display:none与visibility:hidden的区别:   
               1.
                  display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;visibility:hidden是
                  视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素;
                2.
                  使用visibility:hidden比display:none性能上要好,display:none切换显示时visibility,页面产
                  生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,此
                  时就是回流。所有页面第一次加载时需要产生一次回流),而visibility切换是否显示时则不
                  会引起回流。
                 3.
                   display:none隐藏后不占据额外空间,它会产生回流和重绘,而 visibility:hidden和opacity:0
                  元素虽然隐藏了,但它们仍然占据着空间,它们俩只会引起页面
                   重绘。

三、v-if、v-else 、v-else-if的区别

       <div id='app'>
        <p v-if="num==0">0000</p>
        <p v-else-if="num==1">111</p>
        <p v-else-if="num==2">2222</p>
        <p v-else-if="num==3">333</p>
        <p v-else-if="num==4">44</p>
        <p v-else='num==5'>5555</p>
    </div>
    <script src='js/vue.js'></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                //               num:Math.floor(Math.random()*(max-min+1)+min)
                num: Math.floor(Math.random() * (5 - 0 + 1) + 0)
            }
        })
    </script>

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 17,359评论 1 40
  • 前端面试题汇总 一、HTML和CSS 1、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: tr...
    那年夏天的五百万阅读 1,762评论 0 36
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 965评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 10,165评论 1 88
  • 第19天锻炼,今天上班,处理杂事。 感谢李想和我见面聊天! 杂言锦句精选(三): ①不管全世界所有人怎么说,我都认...