VUE内容动态绑定渲染的多种案例

1、数据和方法绑定 (1)方法都存储在methods中,调用方法的时候在JS中直接this.xxx(),在html中采用@click=”xxx()”; (2)属性都存在data中,调用属性时在JS中直接this.xxx,在html中采用{{x...

1、数据和方法绑定

(1)方法都存储在methods中,调用方法的时候在JS中直接this.xxx(),在html中采用@click=”xxx()”;

(2)属性都存在data中,调用属性时在JS中直接this.xxx,在html中采用{{xxx}};

示例:

attachments-2020-06-cmfXMtTF5ef20dc705a3e.png


2、绑定属性

属性绑定主要是把data中定义的数据绑定到html元素的属性上,可以通过v-bind:src=,也可以通过:src=。

示例:

attachments-2020-06-Njn7Nvof5ef20deda7bed.png


3、绑定html

html的绑定主要是将html字符串绑定在页面并解析,主要用到v-html,示例:

attachments-2020-06-m2aTpEYu5ef20e15eae64.png


4、绑定class

class的绑定主要是通过flag的判断,控制给div绑定不同的class类,用于显示不同的样式,示例:

attachments-2020-06-t8IIBIg75ef20e640cbaa.png


5、绑定style

Style绑定主要就是通过v-bind将data中定义的样式变量赋值给style中的属性,示例:

attachments-2020-06-9AfWi53W5ef20e7e45d38.png


  • 发表于 2020-06-23 22:16
  • 阅读 ( 527 )

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Garmcrypto7undop 0 文章