※2-4 属性绑定练习 效果： 要求： 利用Vue的属性绑定来实现

在Vue.js中，属性绑定（Property Binding）是将数据模型（通常是Vue实例的data或计算属性）与UI元素的属性关联起来，这样当数据变化时，视图也会自动更新。要完成「2-4 属性绑定」的练习，你需要熟悉以下几个基本概念：

1. **`v-bind` 或 `:` (简写)：** 这个指令用于双向数据绑定，如 `<input v-model="username">` 就表示输入框的内容同步到 `username` 数据。

2. **表达式：** 可以使用 JavaScript 表达式进行更复杂的绑定，例如 `<p>{{ user.name + ' ' + user.age }}</p>`，显示用户的姓名和年龄。

3. **动态绑定：** 当你需要根据条件改变绑定时，可以使用三元表达式或者计算属性，比如 `<div v-if="isLoggedIn">{{ message }} else {{ notLoggedInMessage }}</div>`。

4. **事件绑定：** 除了数据属性，还可以绑定事件，比如 `<button @click="handleClick">点击我</button>`，点击按钮时执行 `handleClick` 函数。

针对具体的练习，如果有一个列表 `items` 和一个计数器 `counter`，你可以创建这样的模板：

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item.text }}
    </li>
  </ul>
  <button @click="incrementCounter">增加计数器</button>
  <p>当前计数：{{ counter }}</p>
</div>

<script>
export default {
  data() {
    return {
      items: [
        { text: 'Item 1' },
        { text: 'Item 2' },
        { text: 'Item 3' }
      ],
      counter: 0
    };
  },
  methods: {
    incrementCounter() {
      this.counter++;
    }
  }
};
</script>

在这个例子中，列表项的文字是根据 `items` 数组中的数据动态渲染的，每次点击增加计数器按钮，`counter` 的值就会递增并实时反映在视图上。