Vue指令的总结

一.v-bind

1.基本使用：

v-bind用于动态绑定属性。

语法糖：":属性名"

2.v-bind绑定class

第一种：对象语法

<div id="app">
    <h2 v-bind:class="{active:isActive,line:isLine}"></h2>
</div>

<script>
const app = new Vue({
    el:"#app",
    data():{
        return {
            isActive:true,
            isLine:false
        }
    }
})

</script>

第二种：数组语法：

<div id="app">
    <h2 :class="[active,line]">{{message}}</h2>
</div>

<script>
const app = new Vue({
    el:"#app",
    data:{
        message:'helloworld',
        active:'aaaa',
        line:'bbbb'
    }
}) 
</script>

3.v-bind绑定style

第一种：对象语法

<div id="app">
<h2 :style="fontSize:finalSize+'px'">{{message}}</h2>
</div>

<script>
const app = new Vue({
    el:"#app",
    data:{
        message:'helloworld',
        finalSize:100
    }
}) 
</script>

第二种：数组语法

<div id="app">
<h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
</div>

<script>
const app = new Vue({
    el:"#app",
    data:{
        message:'helloworld',
        baseStyle:{backgroundColor:'red'},
        baseStyle1:{fontSize:'100px'}
    }
}) 
</script>

二.v-show

1.作用：

v-show的作用是根据切换元素的显示状态。即修改元素的display，改变元素的显示或隐藏。

2.使用：

<div id="app">
    <image v-show="isShow" src="xxxxx"></image>
</div>

<script>
 var app = new Vue({
     el:"#app",
     data:{
            isShow:false
     }
)}
</script>

三.v-on

1.作用:

v-on用于绑定事件监听。

语法糖："@click"

2.基本使用

<div id="app">
    <h2>{{counter}}</h2>
    <button @click="add">+</button>
</div>

<script>
 var app = new Vue({
     el:"#app",
     data:{
            counter:0
            
     },
    methods:{
        add(){
            this.counter++
        }
    }
)}
</script>

3.传递参数：

如果该方法不需要传递参数，那么方法后的（）可以不添加；

如果该方法需要传递参数，而不传入时，则默认会将原生事件event参数传递进去；

如果需要同时传入某个参数且需要event时，可以通过$event传入事件。

4.修饰符

• .stop：停止冒泡
• .prevent：阻止默认行为
• .native：监听组件根元素的原生事件
• .once：只触发一次回调

四.v-if、v-else-if、v-else

1.作用：

Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

2.基本使用：
 

<div id="app">
    <p v-if="score>=90">优秀</p>
    <p v-else-if="score>=80">良好</p>
    <p v-else-if="score>=60">及格</p>
    <p v-else-if="score>=40">不及格</p>
</div>

<script>
    const app = new Vue({
        el:'#app',
        data:{
            score:98
        }
})
</script>

如果v-if后面的条件不满足，则对应的标签及其子标签不会被渲染。