当前位置：首页 > Web前端 > vue.js

Vue的v-bind详解

时间：2023-03-31 14:32:05 vue.js

前言v-bind主要用于属性绑定，比如你的class属性，style属性，value属性，href属性等等，只要是属性，都可以使用v-bind命令绑定Set。本文主要介绍VueJs中的v-bind命令。需要的朋友可以参考v-bind，主要用于属性绑定。Vue官方提供了一种简写方法：bind，如：绑定HTMLClass对象的语法我们可以通过v-bind:class一个对象来动态切换类

上面的语法表示活动类的存在将取决于数据属性isActivetrue可以在对象中传入更多的属性，实现多个类之间的动态切换。此外，v-bind:class指令也可以与普通类属性共存。当存在如下模板时：

data:{isActive:true,hasError:false}上面的渲染结果是：

当isActive或hasError发生变化时，类列表会相应更新。例如，如果hasError的值为true，则类列表将成为“静态活动文本-危险”绑定数据对象，不必在模板中内联定义

data:{classObject:{active:true,'text-danger':false}}渲染结果同上。我们还可以绑定一个返回对象的计算属性。这是一个常见且强大的模式：data:{isActive:true,error:null},computed:{classObject:function(){return{active:this.isActive&&!this.error,'text-danger':this.error&&this.error.type==='fatal'}}}数组语法我们可以传递一个数组给v-bind:class来应用A类列表data:{activeClass:'active',errorClass:'text-danger'}呈现为：如果你也想根据条件切换列表中的类，可以使用三元表达式这么写，errorClass会一直加，而activeClass只有isActive为真时才会加。但是，当有多个条件类时，这样写起来有点麻烦。所以在数组语法中，也可以使用对象语法写在组件上//1。声明这个组件Vue.component('my-component',{template:'Hi

'})//2。然后在使用的时候添加一些类//3.HTML会被渲染为：Hi

这同样适用于具有数据绑定的类看起来很像CSS，但实际上是一个JavaScript对象。CSS属性名称可以用驼峰式命名或破折号分隔（kebab式，记得用单引号括起来）data:{activeColor:'red',fontSize:30}通常最好直接绑定一个样式对象，这样模板会更清晰data:{styleObject:{color:'red',fontSize:'13px'}}同样，对象语法通常与使用数组语法参考：https://www.runoob.com/vue2/v...

上一篇：Nuxt.js实战经验总结

下一篇：webpack踩坑--打包后资源路径404问题

Vue的v-bind详解相关文章

最新推荐

猜你喜欢