（03）Vue的常用指令

文章目录

[第3章 Vue的常用指令](#第3章 Vue的常用指令)
- [3.1 v-text与v-html](#3.1 v-text与v-html)
- [3.2 v-for](#3.2 v-for)
- [3.3 v-if与v-show](#3.3 v-if与v-show)
- [3.4 MVVM双向绑定](#3.4 MVVM双向绑定)
- - [3.4.1 v-bind](#3.4.1 v-bind)
  - [3.4.2 v-model](#3.4.2 v-model)

第3章 Vue的常用指令

3.1 v-text与v-html

v-text：不会渲染字符串里面的HTML内容
v-html：会渲染字符串里面的HTML内容

html 复制代码

<body style="height: 1000px;">
<div id="box">
    <div v-text="txt"></div>

    <div v-html="txt"></div>

</div>

<script type="text/javascript">
    new Vue({
        el: "#box",
        data: {
            txt: "<h1>Hello</h1>"
        }
    })
</script>

</body>

3.2 v-for

v-for指令用于遍历使用；

html 复制代码

<body>
<div id="box">
    <h3>遍历数组</h3>

    <ul>
        <li v-for="(city,index) in cities">{{city}}---{{index}}</li>

    </ul>

    <h3>遍历对象</h3>

    <ul>
        <li v-for="(val,key) in book">{{key}}---{{val}}</li>

    </ul>

    <h3>遍历对象数组</h3>

    <ul>
        <!-- 遍历对象数组时,需要分配:key,取一个唯一且能标识这条记录的值(id) -->
        <li v-for="(car,index) in cars" :key="car.id">
            <h3>index: {{index}}</h3>

            <p>id:{{car.id}}</p>

            <p>brand:{{car.brand}}</p>

            <p>name:{{car.name}}</p>

        </li>

    </ul>

</div>

<script type="text/javascript">
    new Vue({
        el: "#box",
        data: {
            cities: ["广州","杭州","兰州","郑州","福州"],
            book:{
                id:1,
                name:"《Java核心技术》",
                price: 28.8
            },
            cars:[
                {
                    id:1,
                    brand:"比亚迪",
                    name:"比亚迪F3"
                },
                {
                    id:2,
                    brand:"五菱",
                    name:"红菱宏光S3"
                },
                {
                    id:3,
                    brand:"长安",
                    name:"长安欧尚x7"
                }
            ]
        }
    })
</script>

</body>

3.3 v-if与v-show

v-if：根据表达式的值来决定是否渲染元素（存不存在）
v-show：是根据表达式的值来决定是否显示（display:none）

示例代码：

html 复制代码

<body>
<div id="app">
    <button @click="fun1">v-if效果</button>

    <button @click="fun2">v-show效果</button>

    <hr>

    <!-- v-if决定元素是否存在DOM中-->
    <span v-if="flag_if">小灰</span>

    <hr>
    <!-- v-show只是给元素添加了display:none样式，元素仍然存在DOM中-->
    <span v-show="flag_show">xiaohui</span>

</div>

<script>
    new Vue({
        el: "#app",
        data: {
            flag_if: false,
            flag_show: false
        },
        methods: {
            fun1: function() {
                this.flag_if = !this.flag_if;
            },
            fun2: function() {
                this.flag_show = !this.flag_show;
            }
        }
    });
</script>

</body>

3.4 MVVM双向绑定

双向绑定是MVVM模式中的一个重要特性，它允许数据在Model和View之间自动同步。这意味着当Model中的数据改变时，这些变化会自动反映到视图上；同样地，当用户通过视图改变了数据，这些变化也会被同步到Model中。这种机制极大地减少了手动处理数据同步的代码量，并且使得应用程序更易于维护。

3.4.1 v-bind

v-bind 指令用于动态地将属性绑定到 Vue 实例的数据。当 Vue 实例的数据发生变化时，v-bind 会自动更新绑定的属性值。但是这种绑定是单向的，即 Vue 实例中的数据发生变化后能够即使更新到UI组件上，但是当UI组件上的数据发生变化时，并不能够及时更新到Vue实例上。

它可以用来绑定任何 HTML 属性，包括 class、style 以及其他标准属性，如下：

v-bind:src 用于绑定图片的 src 属性。
v-bind:class 可以根据条件绑定类名。
v-bind:style 用于动态设置样式。

示例代码：

html 复制代码

<body>
<div id="app">
    <p v-bind:title="testTitle">
        绑定titlte属性
    </p>

    <!-- v-bind:title可以简写成:title -->
    <p :title="testTitle" :style="testStyle">
        绑定title和sytle属性
    </p>

    <input type="text" :value="testValue">
    <hr>
    <a :href="url" v-bind::color="testColor">百度一下</a>

    <hr>
    <!--插入值写法-->
    <a v-bind={href:"http://www.baidu.com?id="+id}>百度一下</a>

    <hr>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            testColor: "blue",
            testTitle: "我是通过v-bind绑定的title",
            testValue: "Hello",
            url: "http://www.baidu.com",
            id: 100,
            // 如果存在 - 必须使用驼峰命名或者使用''
            testStyle:{color:'red','font-weight':200}
        }
    });
</script>

</body>

3.4.2 v-model

v-model指令用于将Vue中的数据与组件中的数据进行双向绑定，当Vue中的数据发生变化时，立马会渲染到组件上，当组件上的值发生变化时，会立马更新到Vue中；这使得用户输入能够直接反映到数据模型中，同时数据模型的变化也能立即反映在表单输入上。

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>
<div id="app">
    <input type="text" v-model:value="testValue">
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            testValue:"aaa"
        }
    });
</script>

</body>

</html>