數(shù)據(jù)綁定:
1. {{text}} == return中的text 輸出-》<p>測(cè)試數(shù)據(jù)tab12<p>
2.v-text="text" == return中的text惧辈。輸出-》<p>測(cè)試數(shù)據(jù)tab12<p>
3. v-html="text" == return 中text 與畅厢,v-text不同是會(huì)解析html,輸出-》測(cè)試數(shù)據(jù)tab12
4.直接輸出<view class="">測(cè)試數(shù)據(jù)tab12</view>
樣式綁定:
1.通過class="text1" 綁定。在style中寫出相應(yīng)的樣式.text1{}
2.通過直接在view中綁定。<view class="" style="font-size: 33px;">
3.通過v-bind:style="style1"。然后在數(shù)據(jù)中綁定 style1:"font-size: 42px",其中v-bind可以簡(jiǎn)寫為:style="style1"
4.通過在class前面加:,:class="style2"曙强。相當(dāng)于綁定樣式,然后在style2中綁定<style>中text2樣式
例子
<template>
<view>
測(cè)試數(shù)據(jù)tab12
<view class="text1" v-text="text">
</view>
<view class="" v-html="text">
</view>
<view class="text1" v-text="text1" style="font-size: 33px;">
</view>
<view class="" v-html="text1" v-bind:style="style1"></view>
//這個(gè)和上面那個(gè)相同
<view class="" v-html="text1" style="style1"> </view>
<view :class="style2" v-html="text1" >
</view>
</view>
</template>
<script>
export default {
data() {
return {
text:'<p>測(cè)試數(shù)據(jù)tab12<p>'
text1:'<p>測(cè)試數(shù)據(jù)tab12<p>',
style1:"font-size: 42px"
style2:"text2"
}
},
methods: {
}
}
</script>
<style>
.text1{font-size: 22px; color: #007AFF;}
.text2{font-size: 22px; color:red}
</style>