Vue基础语法一(判断、循环指令)

最新推荐文章于 2024-01-30 16:18:05 发布

冷丁_

最新推荐文章于 2024-01-30 16:18:05 发布

阅读量397

点赞数

分类专栏： Vue精华讲解 Java后端学习精华文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41359998/article/details/122857872

版权

Java后端学习精华同时被 2 个专栏收录

95 篇文章 5 订阅

订阅专栏

Vue精华讲解

17 篇文章 1 订阅

订阅专栏

Vue基础语法一(判断、循环指令)

1、v-bind

现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们在控制台操作对象属
性，界面可以实时更新！
我们还可以使用 v-bind 来绑定元素特性!
demo01.html

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

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

在这里插入图片描述
指令带有前缀 v- ，以表示它们是 Vue 提供的特殊特性.

2.v-if

vue中的条件判断

v-if
v-else-if
v-else

demo2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<div id="app">
    <h1 v-if="ok==true">Yes</h1>
    <h1 v-if="!ok">No</h1>

</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            ok:true
        }
    });
</script>
</body>
</html>

在这里插入图片描述

3.v-for

循环渲染
demo3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}---{{index}}
    </li>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            items:[
                {message:'冷丁1'},
                {message: '冷丁2'},
                {message: '冷丁3'}
            ]
        }
    });
</script>
</body>
</html>

在这里插入图片描述

如果对您有帮助，免费的赞点一个～～～感谢🙏

在这里插入图片描述

冷丁_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue基础语法一(判断、循环指令)

Vue基础语法一(判断、循环指令)1、v-bind现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新！我们还可以使用 v-bind 来绑定元素特性!demo01.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head&
复制链接

扫一扫