【Vue】-02-基本语法

原创已于 2023-01-03 16:50:12 修改 · 82 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2023-01-02 15:01:11 首次发布

Vue学习笔记专栏收录该内容

10 篇文章

订阅专栏

本文介绍了Vue.js中的几个核心指令：v-bind用于动态绑定数据到元素属性，v-if和v-else实现条件渲染，v-for则用于遍历数组或对象。通过示例代码展示了如何使用这些指令实现动态更新和循环展示内容。

文章目录

一、v-bind动态绑定
- 1.静态显示
- 2.使用v-bind动态绑定
二、v-if判断
- 代码
- 效果图
三、v-for循环
- 代码
- 效果图

一、v-bind动态绑定

v-bind用于绑定数据和元素属性，实现动态显示前端页面。

1.静态显示

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">
    <title>helloVue</title>
</head>
<body>
    <div>
        <span title="hello,html">鼠标悬停显示</span>
    </div>
</body>

</html>

效果如下
在这里插入图片描述
此时标签悬停显示的字符串为静态资源，每次更改内容都需要刷新页面，如何动态实现更改内容呢？

2.使用v-bind动态绑定

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <meta charset="UTF-8">
    <title>helloVue</title>
</head>

<body>
    <div id="app">
        <span v-bind:title="message">鼠标悬停</span>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "hello,Vue!",
            }
        });
    </script>
</body>
</html>

此时我们在浏览器开发者模式下的控制台中输入

vm.message="hello world!"

可以看到鼠标悬停变为了“hello world!”，而我们并没有刷新页面，实现了动态显示。

修改前

在这里插入图片描述

修改message内容

在这里插入图片描述

修改后

在这里插入图片描述

二、v-if判断

如果v-if值为真，则显示对应的标签；
如果v-if值为假，则显示v-else对应的标签；

代码

        <div id="app">
            <h1 v-if="type==='A'">type: 'A'</h1>
            <h1 v-else-if="type==='B'">type: 'B'</h1>
            <h1 v-else>v-else</h1>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data:{
                    type: 'A'
                }
            });
         </script>

效果图

在这里插入图片描述

三、v-for循环

代码

Vue代码中数组用[],对象用{}。

        <div id="app">
            <li v-for="item in items">
                {{item.message}}
            </li>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data:{
                    items:[
                        {message:"hello,world"},
                        {message:"hello,vue"},
                        {message:"hello,v-for"}
                    ]
                }
            });
         </script>