Vue笔记 Day3

Vue中使用样式-css

假设<style>标签中有样式，如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
        .red{
            color: red;
        }
        .thin{
            font-weight: 200;
        }
        .italic{
            font-style: italic;
        }
        .active{
            letter-spacing: 0.5em;
        }
    </style>

第一种方式

直接传递一个数组， 注意：这里的class需要使用 v-blind做数组绑定

1
<h1 :class="['thin', 'italic']">it's a Huge H1</h1>

还可以在数组中使用三元表达式，如

1
2
<h1 :class="['thin', 'italic', flag?'active':'']">it's a Huge h1</h1> 
<!--flag为data中定义的数据-->

在数组中可以用对象替换三元表达式

1
<h1 :class="['thin', 'italic', {'active':flag }]">it's a Huge h1</h1>

直接使用对象

1
2
<!--v-bind绑定class的时候，对象的属性是类名，由于对象的属性可带引号，也可以不带引号,属性的值是一个标识符-->
<h1 :class="{red:true, thin:true, italic:false, active:false}">it's a Huge h1</h1>

第二种方式

在style中书写

1
<h1 :style="{color:'red', 'font-weight': 200 }">This is a h1</h1>

定义在data中

1
<h1 :style="styleObj1">This is a h1</h1>

用数组的形式，将style放入其中

1
<h1 :style="[styleObj1, styleObj2]">This is a h1</h1>
1
2
3
4
5
6
7
8
9
10
11
12
new Vue(
  {
   el:'#app',
   data:{
   styleObj1:{
   color: 'red',
   'font-weight': 200
   },
     styleObj2:{
     'font-style': 'italic',
      }
   }

v-for循环

假设有数组，对象数组，对象如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
new Vue({
    el: '#app',
    data: {
    list1:[1,2,3,4,5,6],

     list2:[
           {id:1, name:'a'},
            {id:2, name:'b'},
            {id:3, name:'c'},
            {id:4, name:'d'},
            ],
      user:{
            id:1,
            name: 'Jack',
            gender: 'male',
			}
     }

v-for循环数组

1
2
<!--item为每一项的值，i为每一项的下标-->
<p v-for="(item, i) in list1">{{item}}------index:{{i}}</p>

v-for循环对象数组

1
<p v-for="usr in list2">{{ usr.id }}------name:{{ usr.name }}</p>

v-for循环对象

1
<p v-for="(val, key, index) in user">value:{{val}}---key:{{key}}--index:{{index}}</p>

v-for迭代数字

1
<p v-for="count in 10">loop{{count}}</p>