首页 > 其他 > 详细

v-bind 绑定属性

时间:2019-11-21 16:28:51      阅读:90      评论:0      收藏:0      [点我收藏+]

与mustache相区别,他是对内容(content内部)进行修改的。v-bind的语法糖写法是   :

v-bind 动态绑定class属性:v-bind:class="对象名"。/v-bind:class=‘[‘数组‘]’    

v-bind:class=“{键1:‘值1’,键2:‘值2’}”        Vue在解析的时候,key可以不用加单引号当做字符串进行处理,value加上单引号,当成变量值进行处理;

<body>
<div id="app">
<ul>
<li v-for="(item,index) in items" :style="aaa">{{index}}-{{item}}</li>
<li v-for="(item,index) in items" :style="[background,background1]">{{index}}-{{item}}</li>
</ul>
</div>
<script>
const vm=new Vue({
el:‘#app‘,
data:{
id:1,

name:‘Vue‘,
avatar:"http://pic44.nipic.com/20140723/18505720_094503373000_2.jpg",
count:[1,2,3,4,5],
items:["海王","火影忍者","海贼王","进击的巨人"],
active:‘active‘,
aaa:{
color: ‘chocolate‘ ,
fontSize:"100px"

},
background:{
color:"blue"
},
background1:{
fontSize: "100px"
}
},
method:{

}
})
</script>

//计算属性
<body>
<div id="app">
<p>{{fullname}}</p>
<p>{{fullname1()}}</p>
</div>
<script>
const vm=new Vue({
el:‘#app‘,
data: {
data1:"我是",
date2:"曹润芝"
},
methods:{
fullname1(){
return this.data1+this.date2;
}
},
computed:{
fullname:function () {
return this.data1+this.date2;
}
}
})
</script>
<body>
<div id="app">
<p>总价格:{{totalprice}}</p>
</div>
<script>
const vm=new Vue({
el:‘#app‘,
data: {
books:[{id:110, name:"编程应用0", price:119},
{id:111, name:"编程应用1", price:119},
{id:112, name:"编程应用2", price:119},
{id:113, name:"编程应用3", price:119},
{id:114, name:"编程应用4", price:119},
]
},
computed:{
totalprice:function () {
let result=0;
for (let i=0;i<this.books.length;i++){
result+=this.books[i].price;
}
return result;
}
}
})
</script>
</body>


v-bind 绑定属性

原文:https://www.cnblogs.com/Damocless/p/11905890.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!