【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法

【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法

在进行前端开发之前，需要熟悉vue的一些基本用法，这里举例了一些常见的基本用法

1. v-if, v-else, v-else-if

用于条件渲染元素。当条件为真时，元素会被渲染；否则不会渲染。

示例

Type A
Type B
Not A/B

2. v-show

也用于条件渲染，但它总是会渲染并保留，只是通过 CSS 的 display 属性控制可见性。

示例

<p v-show="isVisible">显示/隐藏这段文字p>

3. v-for

用于循环渲染列表数据。可以遍历数组、对象或数字。

示例

<ul>
  <li v-for="(item, index) in items" :key="index">{{ item }}li>
ul>


<ul>
  <li v-for="(value, key, index) in object" :key="index">{{ key }}: {{ value }}li>
ul>

4. v-bind

为HTML标签绑定如href、css样式等属性值

示例

链接

5. v-model

用于创建双向数据绑定，通常与表单输入控件一起使用。

示例

  请选择
  A
  B
  C

6. v-on

用于监听事件，并触发相应的处理函数。

示例

点击我


点击我


增加