本文共 1711 字,大约阅读时间需要 5 分钟。
来源 | https://xueyuanjun.com/post/21923
我们在《》中演示数据绑定的时候,是将 Vue 实例的模型属性绑定到了表单输入元素上,除此之外,还可以将模型数据绑定到视图层 HTML 元素的任意属性和类名(class)上,绑定表单元素值时使用的是 v-model 指令,而绑定属性和类名时,需要使用 v-bind 指令。接下来,我们来给大家简单演示下这两个功能的使用。
我们在 vue_learning/basic 目录下新建一个 HTML 5 文件,将其命名为 bind.html,首先,我们来演示属性绑定功能的使用。
我们在 HTML 视图中新增一个 a 标签元素,通过 v-bind:title 指令将该元素的 title 属性值与模型属性的 title 值绑定起来,然后在 Vue 对象实例初始化的时候设置模型数据 title 的值:
属性和类名绑定 属性绑定:
学院君网站
注:如果绑定的是其他属性,则将 v-bind:title 中的 title 替换成对应的属性名即可。
在浏览器中预览这个 HTML 文档,将光标移到链接上,就可以显示出 title 属性中设置的提示文本了:
说明定义在 Vue 对象中的模型数据绑定到视图层 title 属性成功,我们可以查看源码进行验证:
v-bind:title 指令中的 v-bind 可以省略,因此下面代码的效果和上面完全一样:
学院君网站
类名绑定可以看作是属性绑定的一个特例,因为 class 本身是 HTML 元素的 class 属性,只是 class 属性通常与 CSS 相关,所以我们单独来介绍一番。类名绑定和属性绑定的语法是完全一致的,只是 class 属性名是固定的,所以对应的指令是 v-bind:class,当然,也可以简写为 :class。
下面我们来看一个示例,还是在 bind.html 中,编写对应的类名绑定代码如下:
属性和类名绑定
这个代码相对复杂一些,我们分开来看,首先定义的是 HTML 视图:
类名绑定:
学院君
我们编写了一个 h1 元素,并通过 v-bind:class="curClass" 将其类名和 Vue 模型属性 curClass 绑定,这样一来就可以通过 Vue 对象来动态设置它的类名,这一切换通过点击下面的 button 按钮来完成,该元素上绑定了点击事件处理函数 toggleClass。
接下来,我们来看对应的 Vue 代码:
在这段代码中,首先我们通过 Array.prototype.getRandomElement 为数组扩展了一个随机获取元素值的 getRandomElement 函数,然后在 Vue 对象的模型属性中定义了 classes 表示 h1 元素上支持切换的 class 类名,以及 curClass 表示当前的类名。
最后,在 methods 中定义了点击事件处理函数 toggleClass,调用该函数时,会从 classes 数组中随机获取一个颜色类名并将其赋值给 curClass,由于数据是双向绑定的,所以 curClass 的值会同步到 h1 的 class 属性中。
最后,我们还编写了一段 CSS 样式代码让类名切换以更直观的方式呈现出来:
至此,所有代码都编写好了,我们在浏览器中预览这个 HTML 文档,由于 curClass 默认值是 color-red,所以 h1 元素的颜色是红色的:
点击【换个颜色】按钮,就可以切换该元素的显示颜色了:
多次点击,则可以随机切换文本的显示颜色:
好了,关于属性和类名绑定我们就简单介绍到这里,下篇教程,我们来看看另一个 Vue 基本语法 —— 计算属性。
推荐阅读
转载地址:http://zdbpi.baihongyu.com/