vue基礎(chǔ)之v-bind屬性、class和style用法分析

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:00:12

vue基礎(chǔ)之v-bind屬性、class和style用法分析

vue基礎(chǔ)之v-bind屬性、class和style用法分析:本文實(shí)例講述了vue基礎(chǔ)之v-bind屬性、class和style用法。分享給大家供大家參考，具體如下：一、屬性屬性: v-bind:src= width/height/title.... 簡(jiǎn)寫: :src= 推薦 <img src={{url}} alt=> 效果能出來(lái)，但是會(huì)報(bào)一

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀vue基礎(chǔ)之v-bind屬性、class和style用法分析:本文實(shí)例講述了vue基礎(chǔ)之v-bind屬性、class和style用法。分享給大家供大家參考，具體如下：一、屬性屬性: v-bind:src= width/height/title.... 簡(jiǎn)寫: :src= 推薦 <img src={{url}} alt=> 效果能出來(lái)，但是會(huì)報(bào)一

本文實(shí)例講述了vue基礎(chǔ)之v-bind屬性、class和style用法。分享給大家供大家參考，具體如下：

一、屬性

屬性:

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

簡(jiǎn)寫:

:src="" 推薦

<img src="{{url}}" alt=""> 效果能出來(lái)，但是會(huì)報(bào)一個(gè)404錯(cuò)誤
<img v-bind:src="url" alt=""> 效果可以出來(lái)，不會(huì)發(fā)404請(qǐng)求

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是數(shù)據(jù)
: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里的數(shù)據(jù)-->
 <strong :class="[claOne,claTwo]">文字...</strong>
 </div>
</body>
</html>

:class="{red:true, blue:false}"http://這里是{ 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]"

注意: 復(fù)合樣式，采用駝峰命名法

<!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'}//注意: 復(fù)合樣式，采用駝峰命名法
 },
 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>

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com