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指令搭配，用于决定这部分页面要不要进行渲染到网页。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue-devtools 是一款基于chrome游览器的插件，用于调试vue应用，这篇文章分步骤给大家介绍了vue-devtools的安装方法，需要的朋友参考下吧2018-04-04
这篇文章主要给大家介绍了关于vue升降版本以及如何查看项目版本的相关资料,在开发和维护Vue.js应用程序时了解所使用的Vue.js版本非常重要,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-12-12
vue3如何使用postcss-px-to-viewport适配屏幕
这篇文章主要介绍了vue3如何使用postcss-px-to-viewport适配屏幕问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
model在vue里面实现双向绑定,通过父节点向子节点传递参数,子节点通过操作再回传给父节点的变量,有点像prop和$emit组合使用,下面这篇文章主要给大家介绍了关于Vue3中v-model的相关资料,需要的朋友可以参考下2022-11-11
什么是vue.js事件处理器？这篇文章主要介绍了vue.js事件处理器的相关资料2017-03-03
红包也叫压岁钱，是过农历春节时长辈给小孩儿用红纸包裹的礼金。本文将通过Vue制作一个红包雨小游戏，文中的示例代码讲解详细，需要的可以参考一下2022-01-01
这篇文章主要介绍了vue组件挂载到全局方法的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
vue的template模板是如何转为render函数的过程
Vue从template到render函数的转换经历模板解析、AST构建、优化、生成渲染函数等步骤,首先进行词法分析将模板拆解为tokens,再进行语法分析构建AST,然后对AST进行静态标记和提升优化,最后转换成JavaScript渲染函数,生成虚拟DOM,完成组件的渲染和更新,实现了模板的高效转化2024-10-10
这篇文章主要介绍了Vue一个动态添加background-image的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
Vue3的Composition API是一个全新的API，它允许开发人员将Vue组件中的逻辑封装在单独的功能性组合中，而不是依赖于Vue选项对象。这篇文章将深入探讨Vue3的Composition API及其使用方法,需要的朋友可以参考下2023-07-07
最新评论