数据绑定:
1. {{text}} == return中的text 输出-》<p>测试数据tab12<p>
2.v-text="text" == return中的text。输出-》<p>测试数据tab12<p>
3. v-html="text" == return 中text 与,v-text不同是会解析html,输出-》测试数据tab12
4.直接输出<view class="">测试数据tab12</view>
样式绑定:
1.通过class="text1" 绑定。在style中写出相应的样式.text1{}
2.通过直接在view中绑定。<view class="" style="font-size: 33px;">
3.通过v-bind:style="style1"。然后在数据中绑定 style1:"font-size: 42px",其中v-bind可以简写为:style="style1"
4.通过在class前面加:,:class="style2"。相当于绑定样式,然后在style2中绑定<style>中text2样式
例子
<template>
<view>
测试数据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>
//这个和上面那个相同
<view class="" v-html="text1" style="style1"> </view>
<view :class="style2" v-html="text1" >
</view>
</view>
</template>
<script>
export default {
data() {
return {
text:'<p>测试数据tab12<p>'
text1:'<p>测试数据tab12<p>',
style1:"font-size: 42px"
style2:"text2"
}
},
methods: {
}
}
</script>
<style>
.text1{font-size: 22px; color: #007AFF;}
.text2{font-size: 22px; color:red}
</style>