vue之指令 

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

<div id="test1">
    <p v-upper-text="msg1"></p>
    <p v-lower-text="msg1"></p>
</div>

<div id="test2">
    <p v-upper-text="msg2"></p>
    <p v-lower-text="msg2"></p>
</div>

<script src="../js/vue.js"></script>
<script>
    //定义全局指令
    // el：指令属性所在的标签对象
    //binding：包含指令相关信息数据的对象
    Vue.directive('upper-text', function (el, binding) {
        el.textContent = binding.value.toUpperCase();
    })
    new Vue({
        el: '#test1',
        data: {
            msg1: 'NBA I Love This Game'
        },
        directives:{
            'lower-text'(el,binding){
                el.textContent = binding.value.toLowerCase();
            }
        }
    })

    new Vue({
        el: '#test2',
        data: {
            msg2: 'NBA '
        }
    })
</script>
</body>
</html>
posted @ 2021-07-13 01:01  King-DA  阅读(19)  评论(0)    收藏  举报