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>


Logo
Vue

前往低代码交流专区

更多推荐

cover

Mac 使用vscode 创建vue项目后修改文件提示：权限不足，以超级用户身份重试

avatar Vue
cover

基于nodejs+vue云计算的城乡医疗卫生服务系统[程序+论文+开题]-计算机毕业设计

avatar Vue
cover

ElasticSearch迁移至openGauss

avatar Vue