打赏

VUE 指令

1、v-bind 动态更新元素属性

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>vue示例</title>
    </head>

    <body>
        <div id="app">
            <a v-bind:href="url">连接</a>
            <img v-bind:src="imgUrl" />
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    url: 'http://www.cnblogs.com/mengfangui/',
                    imgUrl: 'http://www.cnss.com.cn/statics/images/cnss/global/logo.png'
                }
            });
        </script>
    </body>

</html>

 

2、v-on

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>vue示例</title>
    </head>

    <body>
        <div id="app">
           <p v-if="show">文本</p>
           <button v-on:click="handleClose">点击隐藏/切换</button>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    show:true
                },
                methods:{
                    handleClose:function(){
                        this.show = !this.show;
                    }
                }
            });
        </script>
    </body>

</html>

 

3、语法糖

v-bind可以简写为:

v-on可以简写为@

posted @ 2017-12-15 11:09  孟繁贵  阅读(290)  评论(0)  编辑  收藏  举报
TOP