vue :class 动态绑定样式_vue: 动态添加样式

vue如何操作html模版，使页面样式发生改变vue可以是使用两种方法使页面发生改变1. 动态改变class 使class增加、删除达到页面的改变2. 动态的操作style内联样式------------------------ 动态class-----------------------------显示或者隐藏需求1. 点击图片使isCircle取反需要2. 如果isCircle使false，就

weixin_39760295

2814人浏览 · 2020-11-21 01:19:28

weixin_39760295 · 2020-11-21 01:19:28 发布

vue如何操作html模版，使页面样式发生改变
vue可以是使用两种方法使页面发生改变
1. 动态改变class 使class增加、删除达到页面的改变
2. 动态的操作style内联样式

------------------------ 动态class-----------------------------

显示或者隐藏

需求1. 点击图片使isCircle取反
需要2. 如果isCircle使false，就没有circle这个class

<!DOCTYPE html>

v-bind:class 和 v-bind:style 由vue经过特殊处理,可以在后面写对象，对象中的键为属性，值为false则隐藏该属性，值为true为显示该属性

:class 可以绑定多个类
问题: 写多了class的html模版会使可读性很差
解决: 我们可以把它定义在js下，但不能定义在data下，因为在data里不能获取data的数据(底层还没有绑定上)，所以我们把它定义在计算属性下

当它被点击发生true的东西，计算属性检测到它依赖的东西在发生改变，所有返回一个新的对象。

改变类名

<!-- css代码 -->

在div上绑定data的color属性，color属性的值为blue，所有class = blue这个类；

我们添加一个input框，使v-model双向绑定data的color属性，所以当color属性改为red使，div的class也成red类

有多个class类可以写成数组

使用input来改动class类，使用点击来隐藏或显示类

<!-- html代码 -->

--------------------------动态style-------------------------

使用v-bind绑定style样式

style样式是对象形式，但不能在属性中包含中划线，我们可以把它写成字符串或者驼峰式

<!-- 包含在#app div中的html代码 -->

对象后面绑定的是data里的color的数据

new

双向数据绑定，改变color值

可以直接在input框中输入想要的值

多个style属性

<!-- html代码 -->

问题: 有冗余，可读性不高

解决方式: 使用计算属性

<!-- html代码 -->

混合多个样式

<!-- html代码 -->

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^