vue简单样例1

最新推荐文章于 2023-10-16 12:32:14 发布

甜美河边的钓鱼人

最新推荐文章于 2023-10-16 12:32:14 发布

阅读量135

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/chenjianhuideyueding/article/details/107454583

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

对象使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .active { color: darkgreen; }</style><body><div id = "app"

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

对象使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .active {
        color: darkgreen;
    }
</style>
<body>
<div id = "app">
    <h1 v-bind:class="{active: isActive}">{{message}}</h1>
</div>

<script src="../js/vue.js"></script>
<script>
    const  app = new Vue({
        el: '#app',
        data: {
            message: 'hello style',
            isActive: false
        },
    })
</script>

</body>
</html>

{active: isActive}是一个对象的声明，可以添加多个属性。格式为：{属性：boolean},当boolean为false的时候，属性会自动省略。这里也可以通过方法的方式添加属性。

以下是通过方法，直接返回对象：

<h1 v-bind:class="getClasses()">方法的方式</h1>

通过数组的方式：<h1 v-bind:class="['active']">方法的数组</h1>

当加了单引号后，表示一个字符串，如果没有加，那么就是一个变量。同时变量也可以用方法传出对象一样传出。

实现点击列表，然后将被点击的列表变成红色。

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .active{
        color: red;
    }
</style>
<body>

<div id = "app">
  <ul>
      <li :class="{active:highlight==index}" v-for="(item,index) in movies"  v-on:click="btnChange(index)">{{item}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>

<script>
     const app = new Vue({
         el: '#app',
         data: {
             movies: ['hello','hi','h'],
             highlight: 0 #默认第一个为红色
         },
         methods: {
             btnChange: function (index) {
                 this.highlight = index # 点击就让hightlight修改成点击到的那个index
             }
         }
     })
</script>
</body>
</html>

上述的代码实现点击某一个li就可以为红色，默认highlight=0,即第一个为红色。

v-for="(item,index) in movies"可以将index传入到方法中，当作形参，然后赋值给hightlight，当点击的那个li,肯定将对应的li的index传值给highlight,hightlight=index成立,其他肯定不等，所以就实现被点击的变色的要求了。

甜美河边的钓鱼人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue简单样例1

对象使用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .active { color: darkgreen; }</style><body><div id = "app"
复制链接

扫一扫