Vue学习day02

最新推荐文章于 2024-06-06 16:53:37 发布

Happy_change

最新推荐文章于 2024-06-06 16:53:37 发布

阅读量239

点赞数

本文链接：https://blog.csdn.net/Happy_change/article/details/106232386

版权

Vue学习day02

计数器

知识点：
el：挂载点
data：数据
methods：方法
v-on指令：绑定事件，可简写为@
v-text指令：设置元素的文本值，可简写为{{}}
下列代码中通过this关键字获取data中的数据，使用双大括号{{}}文本插值也可使用v-html 指令只需将 <span>{{num}}</span> 改为<span v-text="num"></span>

<body>
    <div id="app">
        <div class="input-num">
            <button v-on:click="sub">
                -
            </button>
            <span>{{num}}</span>
            <button @click="add">
                +
            </button>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
           el:"#app",
           data:{
               num:1
           },
           methods:{
             add:function(){
                 if(this.num<10)
                   this.num++;
                 else
                    alert("已最大");
             },
             sub:function(){
                 if(this.num>0){
                     this.num--;
                 }else{
                     alert("已最小");
                 }
             }
           }
        })
    </script>
</body>

v-show

v-show指令：根据真假切换元素显示状态，值为true显示，为false隐藏。

 <div id="app">
        <input type="button" @click="changeIsShow" value="切换显示状态">
        <img src="./img/01.jpg" alt="" v-show="isShow">
        <input type="button" @click="addAge" value="涨一岁">
        <img v-show="age>=18" src="./img/01.jpg">
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app =  new Vue({
            el:"#app",
            data:{
                isShow:false,
                age:17
            },
            methods:{
                changeIsShow:function(){
                    this.isShow = !this.isShow;
                },
                addAge:function(){
                    this.age++;
                }
            }
        })
    </script>

v-if

v-if指令：根据表达式值的真假，切换元素的显示状态（操纵dom元素）。当表达式值为true，元素存在于dom树中，为false，从dom树中移除。
v-show与v-if的区别：v-show操纵样式，v-if操纵dom树，需要频繁切换的元素用v-show，反之，用v-if，因为操纵dom树对性能消耗比较大。

<div id="app">
        <input type="button" value="切换显示" @click="toggleIsShow">
        <p v-if="isShow">今天好好学习了没？</p>
        <p v-show="isShow">今天好好学习了没？--v-show</p>
        <h2 v-if="temparature>=35">今天太热了！</h2>
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app =  new Vue({
            el:"#app",
            data:{
                isShow:false,
                temparature:40
            },
            methods:{
                toggleIsShow:function(){
                    this.isShow = !this.isShow;
                },
            }
        })
    </script>

v-bind

v-bind指令：设置元素的属性（v-bind：属性名=表达式）常用的有src|class|title 。v-bind可以省略，如<img v-bind:src="imgSrc">可写为<img :src="imgScr">,第二种更为常用。<img :class="isActive?'active':''">也可写为<img :class="{active:isActive}"效果一样第二种更为简洁，一般用第二种！

<div id="app">
        <img v-bind:src="imgSrc" alt="">
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'"
        :class="isActive?'active':''" @click="toggleActive">
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'"
        :class="{active:isActive}" @click="toggleActive">
    </div>
     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app =  new Vue({
            el:"#app",
            data:{
                imgSrc:"./img/01.jpg",
                imgTitle:"好好学习",
                isActive:false
            },
            methods:{
                toggleActive:function(){
                    this.isActive=!this.isActive;
                }
            }    
        })
    </script>