#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>

这里,参数是要监听事件的名称。稍后我们会详细地讨论事件处理。



★月額105円~/容量最大30GB/機能満載! ロリポップ!レンタルサーバー ★

コメント:



(画像の文字列を入力して下さい)

トップ   編集 凍結 差分 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019/12/02 (月) 12:43:59 (690d)