#author("2019-07-18T13:53:26+08:00","default:Admin","Admin") Vue ※前提条件:本情報はVue 2.0を基づいて説明してる 一些指令能够接收一个“参数”,在指令名称之后以 : 表示。例如,v-bind 指令可以用于响应式地更新 HTML 属性: <a v-bind:href="url"> ... </a> <div v-bind:class="activeClass?'myclass':''" v-bind:style="activeStyle?'font-size:20px':''">请看颜色的变化</div> <script> new Vue({ el:"#box", data:{ activeClass:false, activeStyle:false, url:'http://www.baidu.com' } }) </script> 这里 href 是参数,告知 v-bind 指令将元素的 href 属性与表达式 url 的值绑定在一起。 另一个示例是 v-on 指令,用于监听 DOM 事件: <a v-on:click="doSomething"> ... </a> <button v-on:mouseover="overColor" v-on:mouseout="outColor" v-bind:style="color">鼠标经过</button> <script> new Vue({ el:"#box", data:{ message:"hello,vue", color:'color:blue;' }, methods:{ reverseMessage:function(){ this.message=this.message.split('').reverse().join(''); }, overColor:function(){ this.color="color:green"; }, outColor:function(){ this.color="color:blue"; } } }) </script> 这里,参数是要监听事件的名称。稍后我们会详细地讨论事件处理。 中古車買取実績No.1ガリバー コメント: |