vue基础之v-bind属性、class和style用法分析
2019/6/26 23:11:08
本文主要是介绍vue基础之v-bind属性、class和style用法分析,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
本文实例讲述了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:'https://www.baidu.com/img/bd_logo1.png', w:'200px', t:'这是一张美丽的图片' }, methods:{ } }); };
<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]" 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"> <!--这里的calOne,calTwo指data里的数据--> <strong :class="[claOne,claTwo]">文字...</strong> </div> </body> </html>
:class="{red:true, blue:false}"//这里是{ json}
<style> .red{ color: red; } .blue{ background: blue; } </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:'#box', data:{ }, methods:{ } }); }; </script> <div id="box"> <strong :class="{red:true,blue:true}">文字...</strong> </div>
<!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基础之v-bind属性、class和style用法分析的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set