模板语法:属性绑定

• 使用p-bind进行属性绑定

  使用p-bind对元素的属性进行绑定，多个属性之间使用^分隔。属性名称与属性值之间使用英文冒号:分隔，属性值里面使用{{}}进行文本插值绑定。

    <img p-bind="class:round {{myClass}} ^ src:{{mySrc}}">
    <!-- 渲染后是<img class="round border" src="avatar.jpg"> -->
    <style>
        .round{
            border-radius:50%;
            width:100px;
            height:100px;
        }
        .border{
            border:2px solid red;
        }
    </style>
    <script>
        $('img').vm({
            myClass: 'border',
            mySrc: 'avatar.jpg'
        })
    </script>
  

  对于类似checked、disabled等表示状态的属性，可以在属性后面加?来进行绑定，绑定的值应该是一个布尔值，当该值为true时，属性会添加到元素上，否则将从元素上移除属性。

    <input p-bind="disabled? : {{disabled}}">
    <script>
        $('input').vm({
            disabled: true
        })
    </script>