<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue学习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app1">
        <h4>{{fullName}}</h4>
    </div>
    <script>
        var foo = new Vue({
            el: '#app1',
            data: {
                firstName: 'Foo',
                lastName: 'Bar',
            },
            //computed 就是计算属性，特别常用  适用于 它的值是通过data数据得到的
            computed: {
                fullName: {                                   //实时计算属性 下面包括要实时计算的属性
                    get: function () {                         //这是一个getter  return出来东西的
                        return this.firstName + ' ' + this.lastName
                    },
                    set: function (newValue) {                     //setter 赋值 
                        var names = newValue.split(' ');
                        this.firstName = names[0];
                        this.lastName = names[names.length - 1]
                    }
                }
            }

        });
        foo.fullName = 'A sun';                          //调用setter赋值
        alert(foo.firstName);
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue学习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .isActive{
            opacity: 0.5;
        }
        .color{
            color: red;
            font-size: 24px;
        }
        .abc{
            background: #333333;
        }
    </style>
</head>
<body>
    <div id="app1">
        <h5 v-bind:class="['isActive','color']" class="abc">sfsdfsd</h5>        <!--数组语法 --> 
        <mycomp v-bind:class="{isActive,color}"></mycomp>                       <!--模版下 绑定class-->
        <h6 v-bind:style="{'font-size':'20px','display': ['-webkit-box', '-ms-flexbox', 'flex']}">dfdfdf</h6>


    </div>
    <script>
        var foo = new Vue({
            el:'#app1',
            data:{
                isActive:true,
                color:true,
                styleObj:{
                    color:'yellow'
                }
            },
            components:{
                'mycomp':{
                    template:'<p class="abc">组件下的class</p>'
                }
            }
        });
    </script>
</body>
</html>

Logo
Vue

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐

cover

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

avatar Vue
cover

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

avatar Vue
cover

ElasticSearch迁移至openGauss

avatar Vue