Vue(4) —— Vue基本语法

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

原来是小别扇

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

阅读量262

点赞数

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

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

版权

Vue 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

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>

测试
循环下标index
测试

原来是小别扇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue(4) —— Vue基本语法

    我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似，但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联，所有东西都是响应式的，我们在控制台操作对象属性，界面可以实时更新!    我们可以使用v-bind来绑定元素属性！...
复制链接

扫一扫