国外有哪些做建筑材料的网站,建站哪家好 phpwind,福州网站建设服务商,python开发微信小程序这里的绑定其实就是v-bind的绑定#xff0c;如代码所示#xff0c;div后面的引号就是v-bind绑定#xff0c;然后大括号将整个对象括起来#xff0c;对象内先是属性#xff0c;属性后接的是变量#xff0c;这个变量是定义在script中的#xff0c;后通过这个变量#xff…这里的绑定其实就是v-bind的绑定如代码所示div后面的引号就是v-bind绑定然后大括号将整个对象括起来对象内先是属性属性后接的是变量这个变量是定义在script中的后通过这个变量来控制属性实现绑定。 先设置个盒子并为其设置style样式代码如下
templateviewviewimage :srcpicurl/image/view/viewbutton :loadingfalse按钮/buttonview classbox/view
/templatescript setupimport { ref } from vue;const arrs ref([../../static/pic1.png,../../static/pic2.png,../../static/pic3.webp,../../static/pic4.jpg]) ;const picurl ref(../../static/pic1.png) ;const isactive ref(false)const Size ref(30) ;let i 0 ; //这个值不在模板层渲染可以不用refsetInterval((){i ;Size.value i ;isactive.value !isactive.valuepicurl.value arrs.value[i%4] ;},1000)
/scriptstyle langscss
.box{width: 200px;height: 200px;background: orange;
}
.active{background: green; //下面的CSS可以覆盖上面的color: white;
}
/style
效果如下 再添加一个类名为其设置样式也就是说用两个类名作用于同一个盒子。继续在盒子中添加文字设置字体大小代码如下
templateviewviewimage :srcpicurl/image/view/viewbutton :loadingfalse按钮/buttonview classbox activev-bind指令/view
/templatescript setupimport { ref } from vue;const arrs ref([../../static/pic1.png,../../static/pic2.png,../../static/pic3.webp,../../static/pic4.jpg]) ;const picurl ref(../../static/pic1.png) ;const isactive ref(false)const Size ref(30) ;let i 0 ; //这个值不在模板层渲染可以不用refsetInterval((){i ;Size.value i ;isactive.value !isactive.valuepicurl.value arrs.value[i%4] ;},1000)
/scriptstyle langscss
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{background: green; //下面的CSS可以覆盖上面的color: white;
}
/style
效果如下 如图所示现在实现了两个类名共同作用于一个类名且在两个类名定义相同属性的情况下下方的样式会优先作用于类。
现在尝试把active变成动态的值先删掉之前定义的active现在用v-bind形式定义active代码如下
templateviewviewimage :srcpicurl/image/view/viewbutton :loadingfalse按钮/buttonview classbox :class activev-bind指令/view
/templatescript setupimport { ref } from vue;const arrs ref([../../static/pic1.png,../../static/pic2.png,../../static/pic3.webp,../../static/pic4.jpg]) ;const picurl ref(../../static/pic1.png) ;const isactive ref(false)const Size ref(30) ;let i 0 ; //这个值不在模板层渲染可以不用refsetInterval((){i ;Size.value i ;isactive.value !isactive.valuepicurl.value arrs.value[i%4] ;},1000)
/scriptstyle langscss
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{background: green; //下面的CSS可以覆盖上面的color: white;
}
/style
这里的显示效果和刚刚的效果相同。这里请注意定义active时的格式尤其是在使用动态绑定要加上一个单引号以表示它是字符串类型的类名否则没法作用上的。
接下来尝试用一个值来控制active代码如下
templateviewviewimage :srcpicurl/image/view/viewbutton :loadingfalse按钮/buttonview classbox :class {active:true}v-bind指令/view
/templatescript setupimport { ref } from vue;const arrs ref([../../static/pic1.png,../../static/pic2.png,../../static/pic3.webp,../../static/pic4.jpg]) ;const picurl ref(../../static/pic1.png) ;const isactive ref(false)const Size ref(30) ;let i 0 ; //这个值不在模板层渲染可以不用refsetInterval((){i ;Size.value i ;isactive.value !isactive.valuepicurl.value arrs.value[i%4] ;},1000)
/scriptstyle langscss
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{background: green; //下面的CSS可以覆盖上面的color: white;
}
/style
如开头所说的这里用大括号将整个对象括起来对象内包含了属性active属性后接的是变量可以写上true或者false以控制active这里我们用的是true效果如下
还可以将这个变量定义在script中后通过这个变量来控制属性实现绑定这里我们定义变量为false记住一定要用ref来定义代码如下
templateviewviewimage :srcpicurl/image/view/viewbutton :loadingfalse按钮/buttonview classbox :class {active:isactive}v-bind指令/view
/templatescript setupimport { ref } from vue;const arrs ref([../../static/pic1.png,../../static/pic2.png,../../static/pic3.webp,../../static/pic4.jpg]) ;const picurl ref(../../static/pic1.png) ;const isactive ref(false)
/scriptstyle langscss
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{background: green; //下面的CSS可以覆盖上面的color: white;
}
/style
效果如下 这是一种方法 日常使用中还可以使用三元表达式来控制active代码如下
templateviewviewimage :srcpicurl/image/view/viewbutton :loadingfalse按钮/buttonview classbox :class true?active : v-bind指令/view
/templatescript setupimport { ref } from vue;const arrs ref([../../static/pic1.png,../../static/pic2.png,../../static/pic3.webp,../../static/pic4.jpg]) ;const picurl ref(../../static/pic1.png) ;const isactive ref(true)
/scriptstyle langscss
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{background: green; //下面的CSS可以覆盖上面的color: white;
}
/style
当然三元表达式的判断条件也可以填入刚刚设置的isactive变量。 接下来把变量放入定时器让其动态改变代码如下
templateviewviewimage :srcpicurl/image/view/viewbutton :loadingfalse按钮/buttonview classbox :class {active:isactive}v-bind指令/viewview calssbox :class isactive?active:box/view
/templatescript setupimport { ref } from vue;setInterval((){isactive.value !isactive.value},1000)const arrs ref([../../static/pic1.png,../../static/pic2.png,../../static/pic3.webp,../../static/pic4.jpg]) ;const picurl ref(../../static/pic1.png) ;const isactive ref(true)
/scriptstyle langscss
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{width: 200px;height: 200px;background: green; //下面的CSS可以覆盖上面的color: white;
}
/style
成功 以上两种都是常用的方式接下来演示一下内联的样式先写个简单的内联样式设置第二个box的宽度要注意的是内联样式的权重更高会覆盖其他样式代码如下
templateviewviewimage :srcpicurl/image/view/viewbutton :loadingfalse按钮/buttonview classbox :class {active:isactive}v-bind指令/view!-- view calssbox :class isactive?active:box/view --view classbox style width: 300px;内联样式/view
/templatescript setupimport { ref } from vue;setInterval((){isactive.value !isactive.value},1000)const arrs ref([../../static/pic1.png,../../static/pic2.png,../../static/pic3.webp,../../static/pic4.jpg]) ;const picurl ref(../../static/pic1.png) ;const isactive ref(true)
/scriptstyle langscss
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{width: 200px;height: 200px;background: green; //下面的CSS可以覆盖上面的color: white;
}
/style
效果如下 如果要使用变量就需要在style的前面加上冒号并以对象的形式定义刚刚定义了宽度要用单引号括起来代码如下
templateviewviewimage :srcpicurl/image/view/viewbutton :loadingfalse按钮/buttonview classbox :class {active:isactive}v-bind指令/view!-- view calssbox :class isactive?active:box/view --view classbox :style {width:300px}内联样式/view
/templatescript setupimport { ref } from vue;setInterval((){isactive.value !isactive.value},1000)const arrs ref([../../static/pic1.png,../../static/pic2.png,../../static/pic3.webp,../../static/pic4.jpg]) ;const picurl ref(../../static/pic1.png) ;const isactive ref(true)
/scriptstyle langscss
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{width: 200px;height: 200px;background: green; //下面的CSS可以覆盖上面的color: white;
}
/style
或者用数字‘单位’(例260 ‘px’ )这样的形式写出也是可以的。
通过内联也可以实现动态变量将字体大小定义为数字 ‘单位’的形式然后用变量替换掉数字并将其放入定时器中代码如下
templateviewviewimage :srcpicurl/image/view/viewbutton :loadingfalse按钮/buttonview classbox :class {active:isactive}v-bind指令/view!-- view calssbox :class isactive?active:box/view --view classbox :style {width:300px,height:260 px,fontSize:fontsize px}内联样式/view
/templatescript setupimport { ref } from vue;let i 0 ;let fontsize ref(30) ;setInterval((){isactive.value !isactive.valuei ; fontsize.value i ;},1000)const arrs ref([../../static/pic1.png,../../static/pic2.png,../../static/pic3.webp,../../static/pic4.jpg]) ;const picurl ref(../../static/pic1.png) ;const isactive ref(true)
/scriptstyle langscss
.box{width: 200px;height: 200px;background: orange;font-size: 20px;
}
.active{width: 200px;height: 200px;background: green; //下面的CSS可以覆盖上面的color: white;
}
/style
效果如下
