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">
    <!--绑定属性-->
    <!--![](imageSrc)-->

    <!-- 缩写 -->
    ![](imageSrc)
</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>

1-6 vue指令 v-text

1-6 vue指令 v-text

vue指令 v-text

1.v-text

2.v-bind

3.v-bind 案例

推荐阅读更多精彩内容