一、Vue中的样式-class
<script src="lib/vue-2.6.10.js"></script>
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
<div id="app">
<!--第一种使用方式，直接传递一个数组，这里的class需要使用v-bind做数据绑定-->
<h1 :class="['thin','italic']">这是一个很大的h1标签</h1>
<!--在数组中使用三元表达式-->
<h1 :class="['thin','italic',flag?'active':'']">这是一个很大的h1标签</h1>
<!--在数组中使用 对象来代替三元表达式 提高代码的可读性-->
<h1 :class="['thin','italic',{'active':flag}]">这是一个很大的h1标签</h1>
<!--在为class使用v-bind绑定对象的时候，对象的属性是类名，对象的属性可带引号，可不带引号；属性的值是一个标示符-->
<h1 :class="{red:true}">这是一个很大的h1标签</h1>
<!--此处也可以将整个类的对象存储到data中，从而在次直接引用-->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: true
},
})
</script>
二、Vue中的样式-style
<script src="lib/vue-2.6.10.js"></script>
<div id="app">
<!--对象就是无序键值对集合-->
<!--直接通过v-bind绑定样式对象,也可一将样式对象存储到data中进行引用-->
<h1 :style="{color: 'red','font-weight':200}">这是一个h1</h1>
<!--可以通过数组引用多个样式对象-->
<h1 :style="[styleObj1,styleObj2]">这是一个h1</h1>
</div>
<script>
//创建Vue实例
var vm = new Vue({
el: '#app',
data: {
styleObj1: {color: 'red', 'font-weight': 200},
styleObj2: {'font-style': 'italic'}
},
})
</script>
三、v-for指令循环普通数组
<script src="lib/vue-2.6.10.js"></script>
<div id="app">
<!--循环简单数组-->
<p v-for="(item,i) in list">{{i}}---{{item}}</p>
<!--循环对象数组-->
<p v-for="(user,i) in list2">{{i}} -- {{user.id}} ++ {{user.name}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4, 5, 6],
list2: [
{id: 1, name: 'zs1'},
{id: 2, name: 'zs2'},
{id: 3, name: 'zs3'},
{id: 4, name: 'zs4'}
]
},
})
</script>
四、v-for命令循环对象
<script src="lib/vue-2.6.10.js"></script>
<div id="app">
<!--注意： 在遍历对象身上的键值对的时候，除了有 val key 之外，在第三个位置还有一个索引-->
<p v-for="(val,key,index) in user">{{val}} --- {{key}} --- {{index}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
user: {
id: 1,
name: '托尼',
gender: '男'
}
},
})
</script>
五、v-for迭代数字
<script src="lib/vue-2.6.10.js"></script>
<div id="app">
<!--in后面可以放普通数组，对象数组，对象，还可以放数字-->
<!--注意： 如果使用v-for迭代数字的话，前面的count从1开始-->
<p v-for="count in 10">这是第{{count}}次循环</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
})
</script>
六、v-for循环中key属性的使用
<div id="app">
<div>
<label>Id:
<input type="text" v-model="id">
</label>
<label>Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<!--v-for循环的时候，key属性只能使用number或者string-->
<!--key在使用的时候必须使用v-bind:属性绑定的形式指定key的值-->
<!--在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字 类型:key值-->
<p v-for="item in list" :key="item.id">
<input type="checkbox">
{{item.id}} --- {{item.name}}
</p>
<!--key属性可以是循环中的单元具有唯一性-->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [
{id: 1, name: '张三'},
{id: 2, name: '李四'},
{id: 3, name: '王五'},
{id: 4, name: '刘六'},
{id: 5, name: '赵七'}
]
},
methods: {
add() {//添加方法
this.list.unshift({id: this.id, name: this.name});
}
}
})
</script>
七、v-if和v-show的使用
<script src="lib/vue-2.6.10.js"></script>
<div id="app">
<input type="button" @click="toggle" value="toggle">
<!--这里的@click的方法如果只有一句话，也可以直接写在这里，@click="flag=!flag"-->
<!--v-if的特点是每次都会重新删除或创建元素-->
<!--v-if有较高的切换性能消耗-->
<!--如果元素涉及到频繁的切换，最好不要使用v-if，使用v-show较好-->
<h3 v-if="flag">这是用v-if控制的元素</h3>
<!--v-show有较高的初始渲染消耗-->
<!--v-show的特点，每次不会重新进行Dom的删除和创建操作，只是切换了display:none的样式-->
<!--如果元素可能永远也不会被显示则推荐使用v-if-->
<h3 v-show="flag">这是用v-show控制的元素</h3>
</div>
<script>
// 创建Vue实例
var vm = new Vue({
el: '#app',
data: {
flag: true
},
methods: {
toggle() {
this.flag = !this.flag;
}
}
})
</script>
