好资源导航 » 文章资讯 » vue基础之v-bind属性、class和style用法分析

vue基础之v-bind属性、class和style用法分析

2023-08-27 00:04:05 66

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

一、属性

属性:

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

简写:

:src="" 推荐

效果能出来，但是会报一个404错误
效果可以出来，不会发404请求

window.onload=function(){
newVue({
el:'#box',
data:{
http://www.haoziyuan.cchttp://www.haoziyuan.ccurl:'https://www.baidu.com/img/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]"













文字...

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





文字...












文字...

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

:class="json"

官方推荐用法












文字...

style:
:style="[c]"

.red{
color:red;
}

文字...

:style="[c,d]"

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












文字...

:style="json"












文字...

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

返回顶部
514930285
czq8825@qq.com

vue基础之v-bind属性、class和style用法分析

热门推荐

随机推荐