Vue 样式绑定、事件绑定

Z时代
2024-01-10
分类：综合

vue

v-bind:class=" " 绑定样式

    <div id="app">
        <!-- 值是对象形式，字段名是class样式名，值是boolean值，true是引用该样式，false不引用 -->
        <!-- 值是false，只是不引用该样式，并不是就不显示该元素了 -->
        <p v-bind:class="{red:true}">p1</p>
        <!-- 可使用其它的值，会自动转换为boolean值 -->
        <p v-bind:class="{red:10}">p2</p>
        <!-- 数字0转换为false -->
        <p v-bind:class="{red:0}">p3</p>
        <!-- 如果是boolean、数值型之外的字符串，需要加引号才会当做字符串处理，如果不加字符串，会当做变量处理 -->
        <!-- 常使用data中的变量作为值 -->
        <p v-bind:class="{red:flag}">p4</p>
        <!-- 没加引号，当做变量处理，没有这个变量，不会报错，是认为值是null，转化为false -->
        <p v-bind:class="{red:f}">p5</p>
        <!-- 加了引号，作为字符串处理，不管是什么字符串（包括空串、'0')，都转化为true -->
        <p v-bind:class="{red:'f'}">p6</p>
        <!-- 如果有多个样式，字段之间逗号分隔即可 -->
        <p v-bind:class="{red:true,big:true}">p7</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data(){
                return{
                    flag:true
                }
            }
        })
    </script>

v-on:事件=" " 绑定事件

　　<div id="app">
       <!-- 冒号后面指定事件。只用使用Vue对象中自定义的变量、方法，如果使用自带alert()、console.log()这些预置的变量、方法，识别不了 -->
       <!-- 使用Vue对象中自定义的变量 -->
       <button v-on:click="count++">count++</button>
        <!-- 使用Vue对象中自定义的方法，如果函数有参数，写上参数表 -->
        <button v-on:click="tip1">alert</button>
       <!-- 要绑定多个事件时，不能把值写成数组、对象的形式，要使用多个v-on -->
       <button v-on:mouseover="tip2" v-on:mouseout="tip3">mouse</button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:function(){
                return{
                    count:1,
                }
            },
            methods:{
                tip1(){
                    alert(this.count);
                },
                tip2(){
                    alert("mouser over");
                },
                tip3(){
                    alert("mouse out");
                }
            }
        })
    </script>