Vue筆記2

時間 2019-11-05

標籤 vue 筆記简体版

原文原文鏈接

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="vue.js" type="text/javascript" charset="UTF-8"></script>
    </head>

    <body>
        <div id="app">
            <div id="example-1">
                <button v-on:click="counter+=1">數值：{{ counter }}</button><br/>
                <button v-on:click="green('victor',$event)">執行函數</button>
                <button v-on:dblclick="green('victor',$event)">執行函數</button>
                
            </div>
            {{message}}
            <div class="test" v-bind:class="{active:isActive,green:isGreen}" style="width:200px;height:200px,text-align:center;line-height:200px;">hi vue</div>

            <div v-bind:class="['active','test']">HI VUE1</div>
            <div :style="{color:color,fontSize:size}">HI VUE2</div>

            <div v-if="type === 'A'">
                A
            </div>
            <div v-else-if="type === 'B'">
                B
            </div>
            <div v-else-if="type === 'C'">
                C
            </div>
            <div v-else>
                Not A/B/C
            </div>

            <h1 v-show="ok">Hello!</h1>

            <ul id="example-1">
                <li v-for="item in items" v-bind:key="item.id">
                    {{ item.message }}
                </li>
            </ul>

            <ul id="v-for-object" class="demo">
                <li v-for="value in object">
                    {{ value }}
                </li>
            </ul>
        </div>

        <script type="text/javascript">
            var data = {
                counter:0,
                message: 'Hello Vue!',
                isActive: true,
                isGreen: true,
                color: 'green',
                size: '50px',
                type: 'B',
                ok: true,
                items: [{
                        message: 'Foo'
                    },
                    {
                        message: 'Bar'
                    }
                ],
                object: {
                    title: 'How to do lists in Vue',
                    author: 'Jane Doe',
                    publishedAt: '2016-04-10'
                }
            }
            var app = new Vue({
                el: '#app',
                data: data,
                methods:{
                    green:function(str,e){
                        console.log(e);
                        alert('hi '+str);
                        alert(this.type);
                    }
                },
            })
        </script>
        <style>
            .test {
                font-size: 30px;
            }
            
            .active {
                background: #FF0000;
            }
        </style>
    </body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。