Vue5_内容、属性中使用表达式

yudeboo

于 2017-07-31 20:26:03 发布

阅读量2.7k

点赞数

分类专栏：前端文章标签： Vue5

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Vue.js中利用表达式动态切换样式类名，通过输入框和单选按钮改变元素的显示样式，实现不同颜色的文字显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue5_内容、属性中使用表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://www.qianduanzhan.com"></script>
    <style>
        .color1{
              color:red;
              font-size:18px;
        }
        .color2{
            color:green;
            font-size:14px;
            font-weight: 800;
        }
        .color3{
            color:blue;
            font-size:16px;
        }
    </style>
</head>
<body>
<div id="app1">
    <h2 v-once :class="'color'+n">{{title}}</h2>
    <p :class="'color'+n">你好，中国</p>
    <!--属性中使用表达式，来切换类名-->
    请输入：<input type="text" v-model="n"/>    n的值是{{n}}<br/>
    <input type="radio" value="1" v-model="n">红
    <input type="radio" value="2" v-model="n">绿
    <input type="radio" value="3" v-model="n"> 蓝
</div>
<script>
    var app =  new Vue({
        el:'#app1',
        data:{
            title:'5_内容和属性中使用表达式',
            n:'1'
        }
    });
</script>
</body>
</html>