VUE 指令

2018-06-24 01:03:18来源：未知阅读 ()

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可以简写为@

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有