企业官网建设流程全解析

绑定class

为什么需要样式绑定呢?
因为有些样式我们希望能够动态展示

看下面的例子:

<template><div><p:class="{'active':modifyFlag}">class样式绑定</p></div></template><script>exportdefault{name:"goodsTest",data(){return{modifyFlag:true,},}}</script><stylescoped>.active{color:green;font-size:20px;}</style>

绑定的时候可以绑定多个值:
<p :class="{'active':modifyFlag ,'view':viewFlag}">class样式绑定</p>

<template><div><p:class="{'active':modifyFlag ,'view':viewFlag}">class样式绑定</p></div></template><script>exportdefault{name:"goodsTest",data(){return{modifyFlag:true,viewFlag:true,}},//计算属性computed:{viewTrueOrFalse(){returnthis.modifyFlag==true?'YES':'NO'}},methods:{}}</script><stylescoped>.active{color:green;}.view{font-size:40px;}</style>

对于多个对象的绑定,我们只需要将所需要要绑定的整合到一个对象之中即可:
例如:
‘

多个对象的绑定

’

allBind:{active:true,view:true},....样式.....<style scoped>.active{color:green;}.view{font-size:40px;}</style>

除了绑定对象跟对象的引用,还可以绑定数组:
<p :class="[arrayActive,arrayView]" >多个对象的绑定2</p>

省略 data() { return { arrayActive:'active', arrayView:'view', 省略.....

可以使用三元运算符

<p :class="[arrayActive=='active'?'active':'']" >多个对象的绑定3</p>

在绑定时 数组跟对象嵌套时,只能对象嵌套在数组里面,而不能反过来;

<p :class="[arrayActive=='active'?'active':'',{'view':viewFlag}]" >多个对象的绑定4</p>

同理绑定Style时跟对象的用法一致

<p:style="{color:bindColor ,fontSize:fontSize }">绑定style</p><p:style="bindStyle">绑定style2</p>............................分割岛....................................<script>export default { name: "goodsTest", data() { return { bindColor:'red', fontSize:'30px', bindStyle:{ color:"red", fontSize:"40px" }, ....省略...

也可以绑定数组
`

绑定style3

’