VUE.js快速入门（vue本地应用②）

v-show：根据表达式切换显示的和隐藏的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="图片" @click="disable"/>
        <img v-show="isshow" src="./u=4243634915,3474426244&fm=26&gp=0.jpg"/>
    </div>    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                isshow:false
            },
            methods:{
                disable:function(){
                    this.isshow=!this.isshow;
                }
            }
        })
    </script>
</body>
</html>

v-show指令作用：根据真假进行切换元素的显示状态。

原理是修改元素的display，显示隐藏

指令后面的内容被解析成布尔值

v-show后面可以写表达式

 

V-if：根据表达式真假切换显示和隐藏

v-if和v-show结果是一样的

区别：

v-show操作的是display这个元素的值

v-if操作的是dom，直接就删了，需要在加回来

 频繁使用时v-show，反之使用v-if

 

v-bind：操作元素的属性（比如src，title，class）

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active{
            border: 2px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <img v-bind:src="bindsrc">
        </br>
        <img :src="bindsrc" :title="bindtitle" 
        @click="Onclick" :class="isActive?'active':''">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                bindsrc:"./u=4243634915,3474426244&fm=26&gp=0.jpg",
                bindtitle:"rick and morty",
                isActive:false
            },
            methods:{
                Onclick:function(){
                    this.isActive=!this.isActive;
                }
            }
        })
    </script>
</body>
</html>

 

 V-bind指令作用是绑定属性

完整的写法是v-bind：属性名

简写的化可以省略前面v-bind只写：

动态增删class

 

posted @ 2020-05-28 08:32  蔡老板2019  阅读(134)  评论(0)  编辑  收藏  举报