vue-样式

最新推荐文章于 2023-10-28 13:46:38 发布

陈豪小可爱

最新推荐文章于 2023-10-28 13:46:38 发布

阅读量147

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_29257691/article/details/100997256

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 1. 导入Vue的包 -->
<script src="../lib/vue-2.4.0.js"></script>
<body>
<style>
    .red {
        color: red;
    }

    .thin {
        font-weight: 200;
    }

    .italic {
        font-style: italic;
    }

    .active {
        letter-spacing: 0.5em;
    }
</style>
<div id="app">

    <p>{{msg}}</p>
    <input type="text" value="按钮" v-model="msg">
    <!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符 -->
    <h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！！！</h1>
</div>
</body>
<script>
    /**
     *   v-bind 只能单向，
     *   v-model 可以双向数据绑定， 但是只能是input
     */

    <!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符 -->
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
        el: "#app",  //绑定 vue 控制这个区域为vue 实例
        data: {
            msg: '欢迎学习vue',  //数据渲染
            classObj: {red: true, thin: true, italic: true, active: false}

        },
        methods: { //methods 定义了 vue 所有的实例方法


        }


    })


</script>
</html>