vue指令 v-text
- v-text 更新元素文本內(nèi)容, 讓元素的文本內(nèi)容顯示屬性的內(nèi)容
1.v-text
<body>
<!--v-text 更新元素文本內(nèi)容, 讓元素的文本內(nèi)容顯示屬性的內(nèi)容-->
<div id="app">
<p>{{message}}, 那我們爬山去吧!</p>
<p v-text="message">那我們爬山去吧!</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
message:'今天天氣不錯(cuò)'
}
})
</script>
2.v-bind
<strong>v-bind指令</strong> 動(dòng)態(tài)地綁定一個(gè)或多個(gè)特性躲庄，或一個(gè)組件 prop 到表達(dá)式毛秘。
-
v-bind指令可以在其名稱(chēng)后面帶一個(gè)參數(shù)，中間用一個(gè)冒號(hào)隔開(kāi)臂拓。這個(gè)參數(shù)通常是HTML元素的特性（attribute），比如：
v-bind:src="imageSrc" 可以縮寫(xiě)： :src="imgaeSrc"
:class="{ red: isRed }"
<div v-bind:class="{ active: isActive }"></div> 上面的語(yǔ)法表示 class active 的更新將取決于數(shù)據(jù)屬性 isActive 是否為真值 。:class="[classA, classB]" ...
:style="{ fontSize: size + 'px' }" 或 :style="[styleObjectA, styleObjectB]" ...
綁定一個(gè)有屬性的對(duì)象羊苟，比如：
v-bind="{ id: someProp, 'other-attr': otherProp }"
- 語(yǔ)法結(jié)構(gòu)：
v-bind:argument="expression"
<body>
<!-- v-bind 動(dòng)態(tài)綁定一個(gè)或者多個(gè)特性, 綁定的通常是html的特性 -->
<div id="app">
<!--綁定屬性-->
<!---->
<!-- 縮寫(xiě) -->
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
imageSrc:'images/pic1.jpeg',
imageDisc:'女孩很漂亮'
}
})
</script>
3.v-bind 案例
- 案例實(shí)操：讓HTML5學(xué)院在各大學(xué)院中處于選中狀態(tài)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
background-color: red;
font-size:18px;
color: white;
}
</style>
</head>
<body>
<div id="app">
<p v-for="(c , index) in collegeArr" :class="index == selectNum ? 'active' : '' ">{{c}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
collegeArr:['iOS學(xué)院', 'Html5學(xué)院', 'UI學(xué)院','Android學(xué)院', 'Java學(xué)院', 'C++學(xué)院'],
selectNum:2
}
});
</script>
</html>
