属性绑定
<!-- 结果:<p s1="yunya">属性绑定</p> -->
<body>
<div id="app">
<p :s1="attr">属性绑定</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",data: {
attr: "yunya",}
})
</script>
</body>
<!-- 结果:<p s1="attr">属性绑定</p> -->
<body>
<div id="app">
<p :s1="'attr'">属性绑定</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",}
})
</script>
</body>
样式操作
<style>
.italic {
font-style: italic;
}
.red {
color: red;
}
.show{
display: unset;
}
</style>
<body>
<div id="app">
<p :class="{italic:status,red:status}" class="show">属性绑定</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",data: {
status: true,}
})
</script>
</body>
<p :class=[变量1,变量2,"字符串3"]>内容</p>
<!-- 注意，当数组内的元素没有加引号是会认为是一个变量，会去Vue实例中寻找 -->
<!-- 如果数组内的元素加上引号，则被认位是一个字符串 -->
<style>
.italic {
font-style: italic;
}
.red {
color: red;
}
.show{
display: unset;
}
</style>
<body>
<div id="app">
<p :class=[s1,s2,'show']>属性绑定</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",data: {
s1: "italic",s2: "red",}
})
</script>
</body>
<p :style={color:"red",fontSize:"12px",backgroundColor:bgColor}>内容</p>
<!-- 注意!最后的background没有添加单引号，这使得bgColor会当作变量去Vue实例中获取 -->
<body>
<div id="app">
<p :style={fontStyle:"italic",color:"red",display:status}>属性绑定</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",data: {
status:"unset",}
})
</script>
</body>
element.style {
font-style: italic;
color: red;
display: unset;
}
<body>
<div id="app">
<p :style=[fontStyle,ColorStyle]>属性绑定</p>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: "#app",data: {
fontStyle: {"font-size": "24px","font-style": "italic"},ColorStyle: {"color": "red","background-color": "green"},}
})
</script>
</body>
element.style {
font-size: 24px;
font-style: italic;
color: red;
background-color: green;
}
服务热线 19970861797
