vue指令 v-text
- v-text 更新元素文本内容, 让元素的文本内容显示属性的内容
1.v-text
<body>
<!--v-text 更新元素文本内容, 让元素的文本内容显示属性的内容-->
<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:'今天天气不错'
}
})
</script>
2.v-bind
<strong>v-bind指令</strong> 动态地绑定一个或多个特性，或一个组件 prop 到表达式。
-
v-bind指令可以在其名称后面带一个参数，中间用一个冒号隔开。这个参数通常是HTML元素的特性（attribute），比如：
v-bind:src="imageSrc" 可以缩写： :src="imgaeSrc"
:class="{ red: isRed }"
<div v-bind:class="{ active: isActive }"></div> 上面的语法表示 class active 的更新将取决于数据属性 isActive 是否为真值 。:class="[classA, classB]" ...
:style="{ fontSize: size + 'px' }" 或 :style="[styleObjectA, styleObjectB]" ...
绑定一个有属性的对象，比如：
v-bind="{ id: someProp, 'other-attr': otherProp }"
- 语法结构：
v-bind:argument="expression"
<body>
<!-- v-bind 动态绑定一个或者多个特性, 绑定的通常是html的特性 -->
<div id="app">
<!--绑定属性-->
<!---->
<!-- 缩写 -->
</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 案例
- 案例实操：让HTML5学院在各大学院中处于选中状态
<!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学院', 'Html5学院', 'UI学院','Android学院', 'Java学院', 'C++学院'],
selectNum:2
}
});
</script>
</html>
