vue中:class、watch、v-show使用

1、:class 指令

在 Vue.js 中，:class 指令（或 v-bind:class）允许你动态地绑定 CSS 类到一个元素。这个指令有两种主要的使用方式：绑定一个对象或者绑定一个数组。

1.1、:class{} 对象语法

对象语法允许你基于条件来添加或移除类。对象的键是类名，值是一个布尔值，表示是否应该应用该类。

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

当 isActive 为 true 时，类 active 会被应用。
当 hasError 为 true 时，类 text-danger 会被应用。

1.2、:class[] 数组语法

数组语法允许你将多个类作为一个数组传递。可以是字符串数组或对象数组。

<div :class="['static-class', isActive ? 'active' : '', { 'text-danger': hasError }]"></div> 

‘static-class’ 始终会被应用。
当 isActive 为 true 时，类 active 会被应用，否则为空字符串。
当 hasError 为 true 时，类 text-danger 会被应用。

2、watch

watch 监听单个数据；键：就是那个，你要监听的那个家伙；值：可以是函数，当你监控的家伙发生变化时，需要执行的函数，这个函数有两个形参（第一个是当前值（新的值），第二个是更新前的值（旧值））。

	<div id="app">
        <p>{{num}}</p>
        <button @click="num++">点击加一</button>
    </div>

      let vm = new Vue({
            el:'#app',
            data:{
                num:0
            },
            watch:{
            // 当前值（已经改变的值）newval  旧值 oldval
                num:function(newval,oldval){
                    console.log("新值是："+newval);
                    console.log("旧值是："+oldval);
                }
            }
        })

3、v-show

v-show指令可以用来动态的控制DOM元素的显示或隐藏。v-show后面跟的是判断条件，语法如下：

v-show="判断变量"

v-show=“true”，表示显示DOM元素。
v-show=“false”， 表示隐藏DOM元素。

<div id="app">
    <img src="img/1.jpg" v-show="isShow,age>18" >
    <input type="button" value="切换显示状态" @click="changeIsshow">
</div>

<script>
//创建vue实例
var app = new Vue({
    el:"#app",
    data:{
       isShow:false,
       age:19
    },
    methods:{
       changeIsshow:function () {
           this.isShow = !this.isShow;
       }
    },
})
</script>