Vue中v-bind、class和style如何灵活运用实现动态绑定？

2026-04-09 01:051阅读0评论SEO资讯

内容介绍
文章标签
相关推荐

本文共计999个文字，预计阅读时间需要4分钟。

原文：本文实例讲述了Vue基础之v-bind属性、class和style用法。分享给大众，供大家参考，具体如下：一、属性：属性：v-bind:src=src / width / height / title... 简写：:src=src 推荐：img src={{url}} alt=图片描述效果能出来。

本文通过实例展示了Vue的基础用法，包括v-bind属性、class和style的使用。以下为简要介绍，供大家参考：一、v-bind属性用法：v-bind:src=src 简写为 :src=src。推荐使用：img src={{url}} alt=图片描述。效果展示。

本文实例讲述了vue基础之v-bind属性、class和style用法。分享给大家供大家参考，具体如下：

一、属性

属性:

v-bind:src=""
width/height/title....

简写:

:src="" 推荐

<img src="{{url}}" alt=""> 效果能出来，但是会报一个404错误
<img v-bind:src="url" alt=""> 效果可以出来，不会发404请求

window.onload=function(){ new Vue({ el:'#box', data:{ url:'img.558idc.com/uploadfile/allimg/js1/bd_logo1.png', w:'200px', t:'这是一张美丽的图片' }, methods:{ } }); };

二、class和style

:class="" v-bind:class=""
:style="" v-bind:style=""
:class="[red]" red是数据
:class="[red,b,c,d]"

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ claOne:'red',//这里的red是样式class类名 claTwo:'blue' }, methods:{ } }); }; </script> </head> <body> <div id="box">  <strong :class="[claOne,claTwo]">文字...</strong> </div> </body> </html>

:class="{red:true, blue:false}"//这里是{ json}

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ a:true, b:false }, methods:{ } }); }; </script> </head> <body> <div id="box"> <strong :class="{red:a,blue:b}">文字...</strong> </div> </body> </html>

data:{ json:{red:a, blue:false} }

:class="json"

官方推荐用法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ json:{ red:true, blue:true } }, methods:{ } }); }; </script> </head> <body> <div id="box"> <strong :class="json">文字...</strong> </div> </body> </html>

style:
:style="[c]"

.red{ color: red; } <div id="box"> <strong :style="{color:'red'}">文字...</strong> </div>

:style="[c,d]"

注意: 复合样式，采用驼峰命名法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style></style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ c:{color:'red'},//这里的red是 class .red b:{backgroundColor:'blue'}//注意: 复合样式，采用驼峰命名法 }, methods:{ } }); }; </script> </head> <body> <div id="box"> <strong :style="[c,b]">文字...</strong> </div> </body> </html>

:style="json"

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style></style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ a:{ color:'red', backgroundColor:'gray' } }, methods:{ } }); }; </script> </head> <body> <div id="box"> <strong :style="a">文字...</strong> </div> </body> </html>

希望本文所述对大家vue.js程序设计有所帮助。

标签：vue 基础之 vbind 属性