1、v-if & v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
    <!--
        v-if  v-show指令：
               作用：用来通过vue方式控制页面中那些标签的展示和隐藏
               语法：控制哪个标签显示隐藏直接在哪个标签上添加v-if="true/false"或者v-show="true/false"
               区别：
                    1、v-if底层通过dom树上元素节点实现，页面标签展示和隐藏   dom树
                    2、v-show底层通过控制标签css中display属性实现标签的展示和隐藏  css样式

               使用总结：
                    一般来说，v-if有更高的切换开销，而v-show有更高的渲染开销。因此，如果需要非常频繁的切换，使用v-show比较好。否则使用v-if
                    即：变化快用v-show    变化慢用v-if
    -->
    <h2 v-if="isShow">{{msg}}</h2>
    <h2 v-show="isShow">{{msg}}</h2>
</div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: "hello vue",
            isShow: true
        },
        methods: {

        }
    });
</script>

2、v-if & v-show案例应用一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h2 v-show="isShow">{{msg}}</h2>

        <button v-on:click="hide">隐藏</button>
        <button v-on:click="show">显示</button>
        <button v-on:click="change">隐藏/显示</button>
    </div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: "hello vue",
            isShow: true
        },
        methods: {
            hide: function () {
                if(this.isShow == true){
                    this.isShow = false;
                }
            },
            show: function () {
                if(this.isShow == false){
                    this.isShow = true;
                }
            },
            change: function () {
                this.isShow = !this.isShow;
            }
        }
    });
</script>

3、v-if & v-show案例应用二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="app">
        <h1>{{msg}}</h1>
        <div style="width: 200px;height: 200px;background-color: red;" v-show="isShow" v-on:mousemove="hideDiv"></div>
    </div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            msg: "hello vue",
            isShow: true
        },
        methods:{
            hideDiv(){
                this.isShow = !this.isShow
            }
        }
    });
</script>

4、v-bind指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--
        v-bind用来将html标签属性绑定vue实例，日后通过修改vue实例中属性以达到动态修改标签属性的效果
        v-bind:绑定  作用：用来绑定html标签中的某个属性交给vue实例进行管理
                    好处：一旦属性交给vue实例进行管理之后，日后可以通过修改vue实例中绑定的属性达到动态修改变迁属性的效果
                    语法：对应标签上  v-bind:属性名

        v-bind的简化写法：      :属性名=“属性值”， 用冒号代替v-bind:
    -->
    <div id="app">
        <img v-bind:width=width v-bind:height="height" v-bind:src="src" v-on:mousemove="changeSrc">
    </div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            src: "https://img1.baidu.com/it/u=1785717022,2470862482&fm=26&fmt=auto"
        },
        methods: {
            changeSrc(){
                this.src = "https://img0.baidu.com/it/u=3388090337,4070257478&fm=26&fmt=auto";
            }
        }
    });
</script>

5、v-bind指令使用三目运算符的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .aa{
            width: 100px;
            height: 100px;
            border: 10px solid red;
        }

        .bb{
            width: 100px;
            height: 100px;
            border: 10px solid green;
        }
    </style>
</head>
<body>
    <div id="app">
        <div  v-bind:class="cls?'aa':'bb'"></div>
    </div>
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            cls: false
        },
        methods: {

        }
    });
</script>