Vue样式绑定和事件绑定
程序员文章站
2022-06-27 21:33:06
v-bind:class=" " 绑定样式
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>
不管是绑定样式、还是绑定事件,v-bind:class、v-on都需要置于vue对象的管辖范围内才有效,可以放在el指定的元素内,也可以放在template中。
上一篇: vue解惑之slot(插槽)