vue 爬坑之路 （二） 基本指令

vue 爬坑之路 （二） 基本指令

一、v-bind

v-bind：主要用于属性绑定，比如你的class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定。简写形式" ："
<template>
    <div>
        <div :id="pid">{{message}}</div>
        <div :class="pid">{{message}}</div>
        <div :href="pid">{{message}}</div>
    </div>
</template>

二、v-if

v-if：控制切换一个元素是否显示
<template>
    <div>
        <div>{{message}}</div>
        <div v-if='isShow'>{{message}}</div>
    </div>
</template>
<script>
	export default {
	    data: function(){
	        return{
	            message: 'Hello Vue!',
	            isShow:false
	        }
	    } 
	}
</script>

三、v-for

v-for：可以绑定数组的数据来渲染一个项目列表
item：表示循环的内容    i：表示下标
<li v-for="(item,i) in todos" :key="i">
    {{i+1}}--{{ item.text }}
</li>

四、v-on

v-on：绑定事件
<template>
    <div>
        <button v-on:click="onclick">逆转消息</button>
    </div>
</template>

五、v-model

v-model：双向绑定
<template>
    <div>
        <input type="text" v-model="message">
    </div>
</template>