vue常用指令代码实例总结

撸码网

2024-08-19 16:27:18

0次

1. v-bind指令

v-bind指令可以将模板中的数据绑定到Vue实例中的数据对象上，从而实现动态更新数据的目的。v-bind常用于在HTML标签中绑定属性，例如将Vue实例中的数据绑定到img标签的src属性上。

1.1 示例：

以上代码中，v-bind:src表示将Vue实例中的imageSrc属性的值绑定到img标签的src属性上。

1.2 带参数的v-bind

有时候，我们需要动态地绑定多个属性，这时可以使用带参数的v-bind。例如，我们需要动态地绑定img标签的src、alt、title属性：

其中，attributeName是属性名，可以是Vue实例中的一个字符串变量，attributeValue是属性值，可以是Vue实例中的一个数据属性或一个方法。

2. v-if指令

v-if指令可以根据Vue实例中的条件表达式动态地插入或移除DOM元素。当条件为false时，元素将从DOM中移除。当条件为true时，元素将出现在DOM中。

2.1 示例：



{{ message }}

以上代码中，v-if="showMessage"表示如果showMessage为true，则显示p标签，否则将其从DOM中移除。message是Vue实例中的一个数据属性。

3. v-for指令

v-for指令可以遍历Vue实例中的数组或对象，并为每个元素渲染对应的DOM元素。可以使用v-for的形式有两种：

3.1 遍历数组：



  
  • {{ item }}

    • 以上代码中，v-for="item in items"表示遍历Vue实例中的items数组，为数组中的每个元素创建一个li标签。

    3.2 遍历对象：

    

      
  • {{ key }}: {{ value }}

    • 以上代码中，v-for="(value, key) in object"表示遍历Vue实例中的object对象，为每个键值对创建一个li标签。

    4. v-on指令

    v-on指令用于监听DOM事件，并在特定的事件发生时触发Vue实例中定义的方法。v-on指令可以简写为@。

    4.1 示例：

    以上代码中，v-on:click="onClick"表示在点击按钮时触发名为onClick的方法。

    4.2 事件修饰符

    事件修饰符是一些特殊的指令，用于对事件进行细粒度控制。例如，使用.prevent修饰符可以阻止事件的默认行为，使用.stop修饰符可以停止事件的传播。

    以上代码中，在表单提交时会调用Vue实例中的onSubmit方法，并且使用.prevent修饰符来阻止表单的默认行为。

    5. v-model指令

    v-model指令用于在表单元素和Vue实例中的数据之间进行双向绑定。常用于、