简单综合应用一下基础vue

最新推荐文章于 2024-04-11 20:30:09 发布

qq_41073745

最新推荐文章于 2024-04-11 20:30:09 发布

阅读量81

点赞数

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

本文链接：https://blog.csdn.net/qq_41073745/article/details/109791069

版权

Vue学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vue基础的简单应用

学习了一丢丢vue，想要用来实现一个简单的小例子，算是对之前所学的进行简单运用吧，因为没学过html和css，所以对前端还是不太熟，直接上手vue有点难度，不过还是准备先学完vue，毕竟好不容易开始学习哈哈哈

这次简单的例子是实现了一个ul-li的形式展示一个电影列表，在鼠标点击电影名的时候能够在变红与不变红之间切换，算是熟悉了一下v-for进行展示数据吧，还有就是数组当中的一个点击事件的绑定，前面一丢丢还看了v-for进行绑定时给每个元素一个key，这样能够在数组中间插入元素时减少渲染成本，提高网页性能。

也就简单记录一下，小例子代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
    .active{
        color: red;
    }
</style>
<div id="app">
    <ul>
        <li v-for="({isRed , name}, index) in movies "
            :class=" {active : isRed}"
            @click="changeColor(index)">
            {{index}}.{{name}}
        </li>
    </ul>
</div>

<script>
    let app=new Vue({
        el:"#app",
        data:{
            movies:[
                { isRed : false , name : "大话西游" },
                { isRed : false , name : "你的名字" },
                { isRed : false , name : "秒速五厘米"},
                { isRed : false , name : "逃学威龙"}
            ]
        },
        methods:{
            changeColor(index){
                this.movies[index].isRed=!this.movies[index].isRed;
            }
        }
    })
</script>
</body>
</html>

后续再综合起来实现一下复杂的例子，今天就这样啦~希望明天能更好的学习！小baby你也是哦！

qq_41073745

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单综合应用一下基础vue

vue基础的简单应用学习了一丢丢vue，想要用来实现一个简单的小例子，算是对之前所学的进行简单运用吧，因为没学过html和css，所以对前端还是不太熟，直接上手vue有点难度，不过还是准备先学完vue，毕竟好不容易开始学习哈哈哈这次简单的例子是实现了一个ul-li的形式展示一个电影列表，在鼠标点击电影名的时候能够在变红与不变红之间切换，算是熟悉了一下v-for进行展示数据吧，还有就是数组当中的一个点击事件的绑定，前面一丢丢还看了v-for进行绑定时给每个元素一个key，这样能够在数组中间插入元素时减少渲
复制链接

扫一扫