vue 模板语法-属性绑定

vue 模板语法

属性绑定

1.vue如何动态处理属性

v-bind

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

<div id="app">
    <a v-bind:href="url">baidu</a>
    <a :href="url">baidu1</a>
    <button v-on:click='hanle'>qiehuan</button>
</div>
<script type="text/javascript">
    var vm = Vue({
        el:'#app',
        data:{
            url:'http://www.baidu.com'
        },
        methods:{
            handle: function(){
                this.url='http://www.taobao.com'
            }
        }

    })
</script>

v-bind就是用来动态的绑定我们的属性，一般来说绑定的值都是在我们的vue里面进行查找。

当vue里面的值进行改变，我们绑定的属性的值也会进行改变。他的缩写时：，单纯的一个冒号

• 参数：attrOrProp (optional)

• 修饰符：

  • prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。(差别在哪里？)
  • .camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
  • .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

• 用法：

  动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

  在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。

  在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。

  没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。