这篇文章主要介绍了某视频剪辑软件基础之v型装订属性、类和风格用法，结合实例形式分析了vue。j中v型装订绑定及类别、风格样式控制相关操作技巧，需要的朋友可以参考下
本文实例讲述了某视频剪辑软件基础之v型装订属性、类和风格用法。分享给大家供大家参考，具体如下：
一、属性
属性：
v-bind:src=' '
宽度/高度/标题.
简写：
:src=' '推荐
img src='{{url}}' alt=' '效果能出来，但是会报一个404错误
img v-bind:src='url' alt=' '效果可以出来，不会发404请求
window.onload=function(){
新Vue({
el:'#box '，
数据：{
网址：' https://www。百度一下。com/img/BD _ logo 1。巴布亚新几内亚'，
女：' 200像素，
t:'这是一张美丽的图片'
},
方法：{
}
});
};
div id='box '
！- img src='{{url}}' alt='' -
img:src=' URL ' alt=' ':width=' w ':title=' t '
/div
二、class和style
:class='' v-bind:class=' '
:style='' v-bind:style=' '
字体红色是数据
:class='[red，b，c，d]'
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
标题/标题
风格。红色{
颜色：红色；
}。蓝色{
背景：蓝色；
}
/风格
脚本src=' vue。js '/脚本
脚本
window.onload=function(){
新Vue({
el:'#box '，
数据：{
克莱尔："红色",//这里的红色是样式班级类名
克拉特沃："蓝色"
},
方法：{
}
});
};
/脚本
/头
身体
div id='box '
！-这里的卡尔图恩卡隆指数据里的数据-
strong :class='[claOne，claTwo]'文字./strong
/div
/body
/html
:class='{red:true，blue:false}'//这里是{ json}
风格。红色{
颜色：红色；
}。蓝色{
背景：蓝色；
}
/风格
脚本src=' vue。js '/脚本
脚本
window.onload=function(){
新Vue({
el:'#box '，
数据：{
},
方法：{
}
});
};
/脚本
div id='box '
strong :class='{red:true，blue:true} '文字./strong
/div
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
标题/标题
风格。红色{
颜色：红色；
}。蓝色{
背景：蓝色；
}
/风格
脚本src=' vue。js '/脚本
脚本
window.onload=function(){
新Vue({
el:'#box '，
数据：{
答：没错，
错误
},
方法：{
}
});
};
/脚本
/头
身体
div id='box '
strong :class='{red:a，blue:b} '文字./strong
/div
/body
/html
数据：{
JSON:{红色：a，蓝色：false}
}
:class='json '
官方推荐用法
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
标题/标题
风格。红色{
颜色：红色；
}。蓝色{
背景：蓝色；
}
/风格
脚本src=' vue。js '/脚本
脚本
window.onload=function(){
新Vue({
el:'#box '，
数据：{
json:{
红色：没错，
蓝色：没错
}
},
方法：{
}
});
};
/脚本
/头
身体
div id='box '
strong :class='json '文字./strong
/div
/body
/html
风格：
:style='[c]'。红色{
颜色：红色；
}
div id='box '
strong :style='{color:'red'} '文字./strong
/div
:style='[c，d]'
注意：复合样式，采用驼峰命名法
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
标题/标题
款式/风格
脚本src=' vue。js '/脚本
脚本
window.onload=function(){
新Vue({
el:'#box '，
数据：{
c:{color:'red'}，//这里的红色是班级。红色
b:{backgroundColor:'blue'}//注意：复合样式，采用驼峰命名法
},
方法：{
}
});
};
/脚本
/头
身体
div id='box '
strong :style='[c，b]'文字./strong
/div
/body
/html
:style='json '
！文档类型超文本标记语言
html lang='en '
头
meta charset='UTF-8 '
标题/标题
款式/风格
脚本src=' vue。js '/脚本
脚本
window.onload=function(){
新Vue({
el:'#box '，
数据：{
答：{
颜色：'红色，
背景颜色："灰色"
}
},
方法：{
}
});
};
/脚本
/头
身体
div id='box '
strong :style='a '文字./strong
/div
/body
/html
希望本文所述对大家vue。j程序设计有所帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。