Vue(4) —— Vue基本语法

最新推荐文章于 2024-06-01 16:49:07 发布

原来是小别扇

最新推荐文章于 2024-06-01 16:49:07 发布

阅读量299

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/Jzandth/article/details/108761495

版权

Vue 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

本文深入介绍了Vue.js中的v-bind、v-if/v-else和v-for指令。v-bind用于动态绑定元素属性，v-if和v-else提供条件渲染，v-for则用于循环遍历数据。通过这些指令，开发者能够实现响应式UI，根据数据变化动态更新视图，并轻松处理复杂的数据展示逻辑。

摘要由CSDN通过智能技术生成

1.v-bind

<div id="app">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

你看到的 v-bind 等被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。

若是你再次打开浏览器的 JavaScript 控制台，输入 app.message = ‘新消息’，就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新

2.v-if,v-else

判断：判断数据什么时候显示/不显示
循环：循环集合中的数据进行显示

1.判断

v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

</head>
<body>
    <div id="app">
        <h2 v-if="flag">OK</h2>
        <h2 v-else>NO</h2>
    </div>

    <script>

        //viewModel 实现与Model双向绑定，动态更新视图
        var vm = new Vue({
            el:"#app",
            data:{
                flag:true
            }
        });
    </script>
</body>
</html>

测试

v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

</head>
<body>
    <div id="app">
        <h2 v-if="score>90">A</h2>
        <h2 v-else-if="score>80">B</h2>
        <h2 v-else>C</h2>
    </div>

    <script>

        //viewModel 实现与Model双向绑定，动态更新视图
        var vm = new Vue({
            el:"#app",
            data:{
                score:85
            }
        });
    </script>
</body>
</html>

可见这其实和我们学习Java语法是一样的

2.循环

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>

</head>
<body>
    <div id="app">
        <li v-for="item in items">
            {{item.message}}
        </li>
        <h2 v-else>C</h2>
    </div>

    <script>

        //viewModel 实现与Model双向绑定，动态更新视图
        var vm = new Vue({
            el:"#app",
            data:{
                items:[
                    {message:"java基础"},
                    {message:"java框架"},
                    {message:"Vue"}
                ]
            }
        });
    </script>
</body>
</html>