Vue.js 基本语法

<div id="cart-example">
  <h4>购物车</h4>
  <ul>
    <li v-for="item in cart" :key="item.id">
      {{ item.name }} - ￥{{ item.price }} × {{ item.quantity }}
    </li>
  </ul>
  <p>总价: ￥{{ totalPrice }}</p>
  <p>含税总价 (税率{{ taxRate * 100 }}%): ￥{{ totalPriceWithTax }}</p>
</div>

<script>
  new Vue({
    el: '#cart-example',
    data: {
      cart: [
        { id: 1, name: '商品A', price: 100, quantity: 2 },
        { id: 2, name: '商品B', price: 200, quantity: 1 },
        { id: 3, name: '商品C', price: 50, quantity: 5 }
      ],
      taxRate: 0.1
    },
    computed: {
      totalPrice: function() {
        // 计算购物车总价
        return this.cart.reduce((sum, item) => {
          return sum + (item.price * item.quantity);
        }, 0);
      },
      totalPriceWithTax: function() {
        // 基于其他计算属性进行计算
        return this.totalPrice * (1 + this.taxRate);
      }
    }
  });
</script>
                            

<div id="app">
  <!-- 正确的做法：使用key -->
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
      <input type="text" placeholder="输入内容">
    </li>
  </ul>

  <!-- 错误的做法：不使用key -->
  <ul>
    <li v-for="item in items">
      {{ item.name }}
      <input type="text" placeholder="输入内容">
    </li>
  </ul>

  <button @click="addItem">添加新项</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { id: 1, name: '第一项' },
        { id: 2, name: '第二项' },
        { id: 3, name: '第三项' }
      ]
    },
    methods: {
      addItem: function() {
        this.items.unshift({
          id: Date.now(),
          name: '新项' + (this.items.length + 1)
        });
      }
    }
  });
</script>
                            

<div id="app">
  <!-- 文本输入框 -->
  <input v-model="message" placeholder="输入内容">
  <p>输入的内容: {{ message }}</p>

  <!-- 多行文本 -->
  <textarea v-model="multilineText" placeholder="多行文本"></textarea>
  <p style="white-space: pre-line">{{ multilineText }}</p>

  <!-- 复选框 -->
  <div>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked ? '已选中' : '未选中' }}</label>
  </div>

  <!-- 多个复选框 -->
  <div>
    <input type="checkbox" id="vue" value="Vue" v-model="checkedNames">
    <label for="vue">Vue</label>
    <input type="checkbox" id="react" value="React" v-model="checkedNames">
    <label for="react">React</label>
    <input type="checkbox" id="angular" value="Angular" v-model="checkedNames">
    <label for="angular">Angular</label>
    <p>选择的框架: {{ checkedNames }}</p>
  </div>

  <!-- 单选按钮 -->
  <div>
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <p>选择的值: {{ picked }}</p>
  </div>

  <!-- 选择框 -->
  <div>
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option value="A">选项A</option>
      <option value="B">选项B</option>
      <option value="C">选项C</option>
    </select>
    <p>选择的选项: {{ selected }}</p>
  </div>

  <!-- 多选选择框 -->
  <div>
    <select v-model="multiSelected" multiple style="width: 200px">
      <option value="A">选项A</option>
      <option value="B">选项B</option>
      <option value="C">选项C</option>
    </select>
    <p>选择的选项: {{ multiSelected }}</p>
  </div>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: '',
      multilineText: '',
      checked: false,
      checkedNames: [],
      picked: '',
      selected: '',
      multiSelected: []
    }
  });
</script>