Vue入门基础（动态绑定css）

时间 2019-12-22

标签 vue 入门基础动态绑定 css 栏目 CSS 繁體版

原文原文链接

bangdingcss.htmljavascript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Insert title here</title>
</head>

<body>
    <div id="vue-app-bangdingcss">
        <h1>动态绑定样式的两种方式</h1>
        <h2>示例1 属性绑定</h2>
        <!--changeColor默认为false 经过click取反修改css-->
        <div v-bind:class='{changeColor:setColor}' v-on:click='setColor=!setColor'>
            <span>属性绑定</span>
        </div>

        <h2>示例2 计算属性绑定</h2>
        <!--经过修改属性值 进而触发方法来修改样式-->
        <button @click='setColor=!setColor'>点击改变颜色样式</button>
        <button v-on:click='setLength=!setLength'>点击改变长度样式</button>
        <div v-bind:class='computedClass'>
            <span>计算属性绑定</span>
        </div>
    </div>

</body>
<script src="bangdingcss.js">
</script>

<!-- 样式-->
<style>
    span {
        background: red;
        display: inline-block;
        padding: 10px;
        color: #fff;
        margin: 10px 0;
    }

    .changeColor span {
        background: green;
    }

    .changeLength span::after {
        content: 'MMMMMMM';
        margin-left: 10ox;
    }
</style>

</html>

bangdingcss.jscss

new Vue({
    el: '#vue-app-bangdingcss',
    data() {
        return {
            setColor: false, //默认false
            setLength: false
        }
    },
    methods: {
    },
    computed: {
        //经过方法来触发修改样式  注意用this引用属性
        computedClass() {
            return { changeColor: this.setColor, changeLength: this.setLength };
        }
    }
});

页面效果html

1. java基础入门-动态绑定-调用方法的过程
2. uni-app css动态绑定
3. Vue-动态数据绑定
4. vue 动态数据绑定
5. vue动态绑定样式
6. Vue双向绑定入门
7. Vue入门基础（双向数据绑定）
8. Vue入门基础（组件CSS样式）
9. CSS入门基础
10. css基础入门
更多相关文章...
• WSDL 绑定 - WSDL 教程
• W3C CSS 活动 - W3C 教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用