工业UI开发技术-课件 3.1.4-v-bind指令.pptxVIP

v-bind指令深圳市信息职业技术学院

目录01v-bind指令02v-bind指令代码分析03V-bind指令简写形式

本节目标 通过对v-bind指令的介绍，掌握v-bind指令的用法和应用场景，掌握v-bind简写形式。通过本节学习可以：掌握v-bind指令用法掌握v-bind指令简写形式

01v-bind指令

V-bind指令v-bind指令用于将Vue实例中的数据和容器元素属性进行绑定代码如右侧所示：

02v-bind指令代码分析

V-bind指令代码分析代码分析：使用v-bind绑定了a标签的href属性当a标签被点击时，会根据Vue实例中的对应的url数据进行跳转到。同时还给a标签的class属性绑定了Vue实例中kclass的数据。所以在样式代码中书写的样式，将会对a标签中的文字进行修饰。代码中还使用v-bind绑定了img标签的src属性，属性值为Vue实例中的数据，该数据为Vue官网的logo图标。

03v-bind指令简写形式

V-bind指令简写形式v-bind简写形式：:属性名=“由于属性绑定的操作应用场景广泛，使用频繁。所以提供了简写形式。通常将v-bind:属性名=的格式简写成:属性名=以上案例代码容器元素绑定属性过程可修改为如下代码：

THANKYOU深圳市信息职业技术学院