vue.js_03_vue.js的样式和修饰符

1.vue.js的样式

<body>
        <div id="app">
　　　　　　　<h1 :style="styleObj1">这是一个h1</h1>
            <h1 :style="{color:'red','font-weight':200}">1111111111</h1>
            <!--<h1 class="red active">这是一个h1</h1>-->
            <!--第一种方式 传递一个数组    class需要使用 v-bind-->
            <h1  :class="['red','thin']">这是一个h1</h1>
            
            <!--第二种方式可以使用 三元表达式-->
            <h1 :class="['red','thin',flage?'active':'']">这是一个h1</h1>
            
            <!--第三种方式 使用一个对象 {key:value}来代替三元表达式-->
            <h1 :class="['red','thin',{active:flage}]">这是一个h1</h1>
            
            <!--第四种方式直接使用对象来表示 对象的名字可带引号 也可以不带引号-->
            <h1 :class="{red:true,thin:true}">这是一个h1</h1>
            
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    flage:true,　　　　　　　　　　　　styleObj1:{color:'red','font-weight':200}，
                },
                methods: {}
            })
        </script>
    </body>

2.vue.js的修饰符

<div id="app" class="inner" @click="divHandler">
            <!--@click.stop 阻止事件的冒泡-->
            <input type="button" value="点我 stop" @click.stop="btnStop" />

            <!--@click.prevent 阻止默认行为的触发 不会跳转到百度首页-->
            <a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a>

            <!-- @click.capture  实现捕获触发事件的机制  由外到内的冒泡-->
            <div class="inner" @click.capture="div2Handler">
                <input type="button" value="点我 capture" @click="btnCapture" />
            </div>
            
            <!-- @click.self  只能操作自己的事件时 才会触发自己的事件处理函数-->
            <div class="inner" @click.self="div2Handler">
                <input type="button" value="点我 capture" @click="btnCapture" />
            </div>
            
            <!-- @click.once 只能触发一次事件-->
            <a href="http://www.baidu.com" @click.once="linkClick">百度一下</a>
        </div>

来源：https://www.cnblogs.com/asndxj/p/11685742.html

标签

click

capture

class