1. class与style的绑定
1.理解
在应用界面中国,某个(些)元素的样式时变化的class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
xxx是字符串
xxx是对象{aClass:isA,bClass:isB}|{属性名是calss名:值是bool值}
xxx是数组
3.style绑定
:style="{ color:activeColor,fontSize:fontsize + 'px'}"
其中activeColor/fontSize是data属性
代码:
<div id="demo">
<h2>1. class绑定: :class='xxx'</h2>
<p class="cClass" :class="a">xxx字符</p>
<p :class="{aClass:isA,bClass:isB}">xxx对象</p>
<p :class="[szA,szC]">xxx数组</p>
<h2>2. style绑定</h2>
<p :style="{color:activeColor,fontSize:fontsize + 'px'}">style绑定q</p>
<button @click="update"> 更新</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
a: 'aClass',
isA:true,
isB:false,
szA:'aClass',
szC:'cClass',
activeColor:'red',
fontsize:20
},
methods:{
update(){
this.a = 'bClass',
this.isA = false,
this.isB = true,
this.szA = 'bClass',
this.activeColor = 'green',
this.fontsize = 50
}
}
})
</script>
2.条件渲染
1.条件渲染指令
v-if : 进行标签移出,所以在频繁切换时,会不断的创建标签,删除标签,时间很慢
v-else
v-show: 通过样式(display:none)隐藏
2.比较v-if与v-show
如果需要频繁切换v-show较好-->
代码:
<div id="demo">
<p v-if="ok">yes</p>
<p v-else>no</p>
<p v-show="ok">成功</p>
<p v-show="!ok">失败</p>
<button @click="ok=!ok">改变</button>
</div>
<script type="text/javascript" src="js/vue.js">
</script>
<script type="text/javascript">
new Vue({
el:'#demo',
data:{
ok:true
}
})
</script>
3. 列表渲染
1.遍历数组(常用)
v-for ="(p,index) in persons":此时获得了对象p,通过p.name等列出每一项属性名
<h2>测试:v-for 遍历数组</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{index}}---{{p.name}}---{{p.age}}---<button @click="deleteP(index)">删除</button>---
<button @click="updateP(index,{name:'Cat',age:20})">更新</button>---
<button @click="addP(index,{name:'shanshan',age:18})">增加</button>
</li>
</ul>
vue在更新页面中,必须要调用编译方法,当执行了方法后才会对页面的自动检测更新
splice():splice(删除哪一个索引,删除数目[,插入的对象数据]):这种方法可以进行三种(增删改的操作)
增加:
addP(index, newP) {
//增加一栏
this.persons.splice(index, 0, newP)
}
删除:
deleteP(index) {
//删除persons中指定index的p
this.persons.splice(index, 1)
}
修改:
updateP(index, newP) {
//并没有改变persons本身,数组内部发生了变化,但并没有调用变异方法,所以vue不会更新界面
this.persons.splice(index, 1, newP)
}
2.遍历对象(不常用)
v-for="(value,key,index) in persons[1]" 在下面依次循环出需要的值
<h2>测试:v-for 遍历对象</h2>
<ul>
<li v-for="(value,key,index) in persons[1]" :key='key'>
{{value}}----{{key}}----{{index}}
</li>
</ul>
整体代码:
<div id="demo">
<h2>测试:v-for 遍历数组</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{index}}---{{p.name}}---{{p.age}}---<button @click="deleteP(index)">删除</button>---
<button @click="updateP(index,{name:'Cat',age:20})">更新</button>---
<button @click="addP(index,{name:'shanshan',age:18})">增加</button>
</li>
</ul>
<h2>测试:v-for 遍历对象</h2>
<ul>
<li v-for="(value,key,index) in persons[1]" :key='key'>
{{value}}----{{key}}----{{index}}
</li>
</ul>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
new Vue({
el: '#demo',
data: {
//vue本身只是监视了persons的改变,没有监视数组内部数据的改变
//vue重写了数组中的一系列改变数组内部数据的方法(先调用原声的,然后更新界面) --- >数组内部改变,界面自动变化
persons: [{
name: 'Tom',
age: 18
},
{
name: 'Jack',
age: 19
},
{
name: 'Bob',
age: 12
},
{
name: 'Shan',
age: 18
}
]
},
methods: {
deleteP(index) {
//删除persons中指定index的p
this.persons.splice(index, 1)
},
updateP(index, newP) {
//并没有改变persons本身,数组内部发生了变化,但并没有调用变异方法,所以vue不会更新界面
//this.persons[index] = newP
this.persons.splice(index, 1, newP)
},
addP(index, newP) {
//增加一栏
this.persons.splice(index, 0, newP)
}
}
})
</script>
