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代码 -->
扫一扫
2156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
