Vue之绑定class样式与style样式方式
1.回顾HTML的class属性
答：任何一个HTML标签都能够具有class属性，这个属性可能只有一个值，如class="happs"，也有可能存在多个属性值，如class="happs good blue"，js的原生DOM针对第二种多个属性值的使用了伪数组进行引用，即classlist，另外也有一个属性classname返回一阵个字符串。
因此，Vue可以修改其接管的dom节点的HTML代码里面标签的class属性，进而达到一些目的，比如修改样式等。
2.Vue输入修改class的属性？
答：使用v-bind指令即可修改class属性值，如:class="value"。
此外，value也可以是一个数组，如
class="classArr"，classArr=["s1","s2","s3"]
也可以是一个对象
class="classObj"，classObj={"s1":Ture,"s2":Ture,"s3":Ture}
3.Vue修改style内联样式？
答：因为style的属性值是一串键值对形式的字符串，所以使用v-bind进行修改属性时，必须以属性的形式进行修改，如:style="{fontSzie:100+"px"}" ，而且这里面的键不能乱写，必须是合法的HTML中的style属性名称，的小驼峰写法，比如backgroundColor="xx"。
4.v-show指令？
答：v-show指令用于控制HTML标签的显示与隐藏，他的属性值必须是一个布尔值。
当表达式的值为 true 时，display 属性被设置为原来的值（比如 block、inline、flex 等），元素显示出来；当表达式的值为 false 时，display 属性被设置为 none，元素隐藏起来。
一般用法：<h1 v-show=”true“>。
5.v-if指令？
答：用于控制元素是否出现在DOM树之中。
6.v-if，v-else-if，v-else指令？
答：与js代码一致，但是每一行必须连贯，不能中断，作用就是按照条件选择指定的元素进行显示。
7.<template> 伪标签？？
答：该标签是Vue指定的伪标签，用于容纳一系列HTML元素，类似于DIV，最终会被Vue解析到HTML文档当中。
他只能与v-if指令搭配，用于决定这部分页面要不要进行渲染到网页。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue3 component is 不显示的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本文主要介绍了vue ElementUI的from表单实现登录效果的示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
html和vue都是前端技术中非常重要的一部分,其中html是web开发的基石,而vue则是现代化的前端开发框架之一,下面这篇文章主要给大家介绍了关于如何将HTML页面改写到vue项目中的相关资料,需要的朋友可以参考下2024-08-08
本文主要介绍了如何在vuejs项目中使用md5加密密码的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
随着vue3.4版本的发布,defineModel也正式转正了,它可以简化父子组件之间的双向绑定,是目前官方推荐的双向绑定实现方式,下面就跟随小编一起深入了解一下defineModel的使用吧2024-02-02
Vue提供了一种称为函数式组件的组件类型,用来定义那些没有响应数据,也不需要有任何生命周期的场景,它只接受一些props来显示组件,下面这篇文章主要给大家介绍了关于Vue高级组件之函数式组件的使用场景与源码分析的相关资料,需要的朋友可以参考下2021-11-11
这篇文章主要介绍了Vue3之 页面,菜单,路由的使用，文章围绕Vue3页面,菜单,路由相关资料展开详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要给大家介绍了关于vue3如何通过ref获取元素离顶部的距离,文中通过代码以及图文介绍的非常详细,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了vue中选中多个选项并且改变选中的样式，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-09
这篇文章主要介绍了vuex如何修改状态state的方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
最新评论