VUE常见指令
v-text
<template>
<!-- vue主文件 -->
<div v-text="'我是1811A的一名普普通通的帅气的讲师'">
</div>
</template>
v-html
<template>
<!-- vue主文件 -->
<div v-html="'<h1>我是1811A的一名普普通通的帅气的讲师</h1>'">
</div>
</template>
v-bind
<template>
<!-- vue主文件 -->
<div>
<input v-bind:type="type" />
<input :type="type" />
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
type: "checkbox",
};
},
methods: {
}
};
</script>
v-if v-else-if v-else
<template>
<!-- vue主文件 -->
<div>
<div v-if="type === 2">
1811A最棒
</div>
<div v-else-if="type === 1">
1811A
</div>
<div v-else>
我是1811A讲师
</div>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
type: 5
}
}
}
</script>
v-show
<template>
<!-- vue主文件 -->
<div>
<div v-show="true">1811A</div>
</div>
</template>
v-for
<template>
<!-- vue主文件 -->
<div>
<div v-for="(item, idx) in list" :key="idx" class="items">
<span>{{item.class}}讲师:{{item.name}}</span>
</div>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
list: [
{
class: "1811A",
name: "小刚"
},
{
class: "1810A",
name: "小东"
}
]
};
}
};
</script>
v-on
<template>
<!-- vue主文件 -->
<div>
<span @click="isShow">按钮</span>
<span v-on:click="isShow"></span>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
list: [
{
class: "1811A",
name: "小刚"
},
{
class: "1810A",
name: "小东"
}
]
};
},
methods: {
isShow() {
console.log(this)
}
}
};
</script>
v-model
<template>
<!-- vue主文件 -->
<div>
<input v-model="value" />
<span @click="changeInput">按钮</span>
</div>
</template>
<script>
export default {
name: "app",
data() {
return {
value: ""
};
},
methods: {
changeInput() {
this.value = '1811A'
}
}
};
</script>