VueJs学习随笔--Style绑定和条件渲染

绑定 style 样式

我们可以传给 v-bind:class 一个对象,以动态地切换 class:

1
2
3
.active{
    color: red;
}
1
2
3
<div id="app">
    <div v-bind:class="{ active: isActive }">我不一定是红色的DIV</div>
</div>
1
2
3
4
5
6
new Vue({
    el: '#app',
    data: {
        isActive: true
    }
})

我不一定是红色的DIV

上面的 { active: isActive } 表示是否存在 active 属性取决于 isActive 的值是 true 还是 false。

当然这个动态 class 也可以和静态的 class 共存。

1
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

我们也可以将绑定的动态 class 定义在 data 内:

1
2
3
4
5
6
7
 .active{
     color: red;
 }
+
+.fw{
+    font-weight: 800;
+}
1
<div v-bind:class="classObject"></div>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
new Vue({
    el: '#app',
    data: {
-       isActive: true
+       classObject: {
+           active: true,
+           fw: true
+       }
    }
})

我不一定是红色的DIV

渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式:

1
2
3
<div id="app">
    <div v-bind:class="classObject">DIV</div>
</div>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
 new Vue({
    el: '#app',
    data: {
        isActive: false,
        isFw: true
    },
    computed: {
        classObject: function(){
            return {
                active: this.isActive,
                fw: this.isFw
            }
        }
    }
})

绑定内联样式

绑定内联样式可以使用 v-bind:style 来实现:

1
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
1
2
3
4
data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象通常更好,这会让模板更清晰:

1
<div v-bind:style="styleObject"></div>
1
2
3
4
5
6
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值,例如:

1
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中,如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染 display: flex

条件渲染

这个比较简单,和我们 Java 中的 if...else if...else 比较像:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div id="app">
    <div v-if="type === 'A'">
    A
    </div>
    <div v-else-if="type === 'B'">
    B
    </div>
    <div v-else-if="type === 'C'">
    C
    </div>
    <div v-else>
    Not A/B/C
    </div>
</div>
1
2
3
4
5
6
new Vue({
    el: '#app',
    data: {
        type: 'D'
    }
})

如果我们只是单纯的判断 true 和 false 来让元素显示或者隐藏,建议使用 v-show ,因为它比 v-if 开销小:

1
<h1 v-show="ok">Hello!</h1>

同样的,可以使用 v-for 来遍历集合:

1
2
3
<li v-for="todo in todos">
    {{ todo }}
</li>

类似于 v-if,你也可以利用带有 v-for 的 <template> 渲染多个元素。比如:

1
2
3
4
5
6
<ul>
    <template v-for="item in items">
        <li>{{ item.msg }}</li>
        <li class="divider" role="presentation"></li>
    </template>
</ul>

事件处理

可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。

1
2
3
4
<div id="example-1">
    <button v-on:click="counter += 1">Add 1</button>
    <p>The button above has been clicked {{ counter }} times.</p>
</div>
1
2
3
4
5
6
var example1 = new Vue({
    el: '#example-1',
    data: {
        counter: 0
    }
})

通常比较复杂的事件处理我们会这样将事件处理放入 mothods:

1
2
3
4
5
<div id="example-1">
-    <button v-on:click="counter += 1">Add 1</button>
+    <button v-on:click="count">Add 1</button>
    <p>The button above has been clicked {{ counter }} times.</p>
</div>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
var example1 = new Vue({
    el: '#example-1',
    data: {
        counter: 0
    },
    methods: {
        count: function(event){
            this.counter++
        }
    }
})

除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法:

1
2
3
4
5
<div id="example-1">
-   <button v-on:click="count">Add 1</button>
+   <button v-on:click="count(3)">Add 3</button>
    <p>The button above has been clicked {{ counter }} times.</p>
</div>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var example1 = new Vue({
    el: '#example-1',
    data: {
        counter: 0
    },
    methods: {
-        count: function(event){
-            this.counter++
-        }
+        count: function(add){
+            this.counter = this.counter + add
+        }
    }
})