vue属性绑定指令

目录

v-bind

使用 Javascript 表达式

---

v-bind

如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令。用法示例如下：

<div id="app">
    <input type="text" v-bind:placeholder="tips">
    <hr>
    <img :src="photo" alt="" style="width: 150px;">
</div>
<script>
    // 创建 Vue 的实例对象
    const vm = new Vue({
      // el 属性是固定的写法，表示当前 vm 实例要控制页面上的哪个区域，接收的值是一个选择器
      el: '#app',
      // data 对象就是要渲染到页面上的数据
      data: {
        tips: '请输入用户名',
        photo: 'https://vuejs.bootcss.com/images/logo.png'
      }
    })
</script>

运行：

由于 v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）代码中的:src就是简写的形式

使用 Javascript 表达式

 在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持Javascript 表达式的运算，例如：

 示例代码：

<div>1 + 2 的结果是：{{ 1 + 2 }}</div>
<div>{{ tips }} 反转的结果是：{{ tips.split('').reverse().join('') }}</div>
<div :title="'box' + index">这是一个 div</div>
data: {
        index: 3
      }

 运行：