案例1;点击换色
想要的效果是:点击哪个哪个的颜色就变成红色
A
B
<template>
<ul >
<li v-for="item in list" v-bind:class="{finish:item.isfinished}">{{item.label}}</li> //比较容易忽视这里面的也是循环得到的。让他绑定数组里的isfinished,他就是变量可以有不同的值
</ul>
</template>
<script>
export default{
data(){
return {
list:[
{label:'A',isfinished:true},
{label:'B',isfinished:false}
]
}
}
}
<style>
.finish{color:red;}
</style>
案例2;添加内容
在上面的基础上进一步。
一个输入框输入的内容,添加到下面的 ul中。
<template>
<input type="text" v-model="newitem" @keyup.enter="add"/> //鼠标抬起点ernter就让执行这个添加的操作
<ul >
<li v-for="item in list" v-bind:class="{finish:item.isfinished}">{{item.label}}</li> //比较容易忽视这里面的也是循环得到的。让他绑定数组里的isfinished,他就是变量可以有不同的值
</ul>
</template>
<script>
export default{
data(){
return {
list:[
{label:'A',isfinished:true},
{label:'B',isfinished:false}
]
},
newitem:' '
},
method:{
add(){
this.list.push({ //push是向数组中添加内容,下面的两个字段也是data里面就有的。
label:this.newitem , //这里的this其实是data里面的元素
isfinished:false
});
this newitem=""; //添加完以后这个里面的内容清空
}
}
}
<style>
.finish{color:red;}
</style>
案例3;选项卡
实现选项卡的效果
<div id="main">
<nav @click.prevent> // @click.prevent防止链接打开 URL:
<a v-for="item,index in items" :class="{'show': item.active}" @click="makeActive(item,index)">{{item.name}}</a> // index是索引
</nav>
<p>你选择的是: <b>{{activenum}}</b></p>
</div>
<style>
.show{background-color:red;}
</style>
<script>
export default{
data() {
return {
activenum:'HTML', 把选中的元素放这里
items:[
{name:'HTML', active:true}, //active是决定他的状态的
{name:'CSS', active:false},
{name:'JavaScript', active:false},
{name:'Vue.js', active:false}
]
}
},
methods:{
makeActive(item, index){
this.activenum=item.name;//获取选中的元素
for(var i=0;i<this.items.length;i++){ //所有的选项卡都是未选中的状态
this.items[i].active=false;
}
this.items[index].active=true; // 点击的那个元素使用show的样式
}
}
案例4;合计总价
<div class="main">
<ul>
<li v-for="item in items" @click="toggleA(item)" :class="{'active':item.active}">
<span>{{item.name}}</span>
<span>{{item.price |currency}}</span> //currency过滤器
</li>
</ul>
<p>合计:{{total |currency}}</p> //total合计值,需要随着你选择的内容增加或者减少
</div>
<script>
data(){
return{
items:[
{name: 'Web Development1',price:20,active:true},
{name: 'Web Development2',price:12,active:false},
{name: 'Web Development3',price:35,active:false},
{name: 'Web Development4',price:2,active:false},
]
}
},
computed:{
total(){ 注意虽然这个total是后面有括号的,但是在页面中写的时候直接写{{total}}
var total=0;
this.items.forEach(function(s){ //items循环获得选中的价格
if(s.active){total+=s.price;} //只取选中状态的price相加
})
return total; 千万别忘记了最后要返回total
}
},
methods:{
toggleA(i){ //点中就改变状态
i.active=!i.active;
},
},
filters:{ //过滤器,所有数字保留两位小数
currency(value){
return (value-0).toFixed(2);
}
}
}
</script>