Vue——指令与事件

1.v-if

v-if/v-else/v-else-if都是用于逻辑判断。
当值为true的时候元素会被插入，当值为false的时候，元素会被删除。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <h3 v-if="show">显示这段文本</h3>
        <h3 v-else>没有显示这段文本</h3>
        <h3>{{ show?'显示' : '不显示' }}</h3>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                show: false,
            }
        })
    </script>
</body>
</html>

 

2.v-bind

v-bind用于动态更新HTML元素上面的属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">v-bind
        <a v-bind:href="url">www.baidu.com</a>
        <img v-bind:src="imgurl">
        <!--语法糖：用：代替<img :src="imgurl">-->
    </div>
    <!--v-bind的基本用途是动态更新HTML元素上的属性-->
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                url: 'www.baidu.com',
                imgurl: 'http://i1.umei.cc/uploads/tu/201705/22/slt1.png'
            }
        })
    </script>
</body>
</html>

 

3.v-on

v-on用来绑定事件监听.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div v-show="show">这是一段测试文本</div>
        <button v-on:click="handleHide">点击隐藏</button>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                show: true
            },
            methods: {
                handleHide: function() {
                    this.show = this.show ? false : true
                }
            }
        })
    </script>

</body>
</html>

除了click以外还有dbclick、keyup、mousemove。
　　keyup/keydown： 按下按键或松开
　　dbclick：连续两次双击触发
　　mousemove：鼠标移动

当然这里还可以使用一个内联语句的写法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <div v-show="show">这是一段测试文本</div>
        <button v-on:click="show?show=false:show=true">点击隐藏</button>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                show: true
            },
        })
    </script>
</body>
</html>

 

posted @ 2020-04-12 18:52  明王不动心  阅读(278)  评论(0)  编辑  收藏  举报