VUE常見指令
- v-text
- v-html
- v-bind
- v-if v-else-if v-else
- v-show
- v-for
- v-on
- v-model
v-text
// 輸出一個字串
<template>
<!-- vue主檔案 -->
<div v-text="'我是1811A的一名普普通通的帥氣的講師'">
</div>
</template>
v-html
// 編譯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
// 簡單的js陳述句判斷，不會去編譯值為flase的陳述句
<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
// 判斷簡單的js陳述句，回去編譯值為flase的陳述句，編譯之后的樣式更改為display：none
<template>
<!-- vue主檔案 -->
<div>
<div v-show="true">1811A</div>
</div>
</template>
v-for
// 在元素中遍歷資料 注意：一定要加key，被遍歷的資料一定要是陣列
<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
// 指令用于給監聽DOM事件 縮寫為@
<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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/263840.html
標籤：其他
上一篇：【開發錯誤記錄】關于SpringBootApplication掃描不到其他模塊下的bean問題（已解決）
下一篇：逐行解釋JS防抖及防抖的使用