欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue计算属性+vue中class与style绑定

程序员文章站 2022-06-22 08:47:06
vue计算属性 在模板中放入大量的逻辑会让模板过重且难以维护 计算属性下所有函数可以放到computed中 class与style绑定 原始写法 v-bind:class 缩写 :class class绑定的三种形式 style的三种绑定形式 属性值为true显示,false不显示 第一种绑定方式: ......

vue计算属性

在模板中放入大量的逻辑会让模板过重且难以维护

计算属性下所有函数可以放到computed中

vue计算属性+vue中class与style绑定

 

 vue计算属性+vue中class与style绑定

 

 

class与style绑定

原始写法 v-bind:class  缩写 :class

class绑定的三种形式

vue计算属性+vue中class与style绑定

 

 

style的三种绑定形式

vue计算属性+vue中class与style绑定

 

 

属性值为true显示,false不显示

第一种绑定方式:

vue计算属性+vue中class与style绑定

 

 vue计算属性+vue中class与style绑定

 

 第二种绑定方式:

vue计算属性+vue中class与style绑定

 

 vue计算属性+vue中class与style绑定

 

 第三种绑定方式:

vue计算属性+vue中class与style绑定

 

 vue计算属性+vue中class与style绑定

 

 

style修改

方式1:

vue计算属性+vue中class与style绑定

 

 vue计算属性+vue中class与style绑定

 

 

方式2:

vue计算属性+vue中class与style绑定

 

 

vue计算属性+vue中class与style绑定

 

 

方式三:

vue计算属性+vue中class与style绑定

 

 vue计算属性+vue中class与style绑定