Vue.js的小例子--随便写的

来源：互联网发布：淘宝上卖什么比较好编辑：程序博客网时间：2024/05/16 05:36
1.领导安排明天给同事们科普下vue
2.简单写了两个小例子
3.话不多说直接上代码
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            .active {                width: 100px;                height: 100px;                background-color: red;            }        </style>    </head>    <body>        <!--这是我们的View-->        <div id="app">            {{ message }}        </div>        <hr />        <div id="model">            <input type="text" v-model="text" />            <span>{{text}}</span>        </div>        <hr />        <div id="_class">            <div v-bind:class="{ 'active' : isTrue }">1</div>            <div v-bind:class="{ 'active' : getClass }">1</div>        </div>        <hr />        <div id="_function">            <span>{{art}}</span>            <input type="button" v-on:click="getClick" />            <select v-on:change="getChange">                <option value="1">1</option>                <option value="2">2</option>                <option value="3">3</option>            </select>        </div>        <hr />        <div id="_ifAndFor">            <template v-for="(son, index) in father">                <span v-if="index % 2 == 0">{{son}}</span>                <span v-else-if="index % 3 == 0" style="background-color: green;">{{son}}</span>            </template>        </div>        </hr>    </body>    <script src="js/vue.js"></script>    <script>        // 这是我们的Model        var exampleData = {            message: 'Hello World!'        }        // 创建一个 Vue 实例或 "ViewModel"        // 它连接 View 与 Model        new Vue({            el: '#app',            data: exampleData        })        new Vue({            el: '#model',            data: {                text: ""            }        })        new Vue({            el: '#_class',            data: {                isTrue: false            },            methods: {                getClass: function () {                    return !this.isTrue;                }            }        })        new Vue({            el: '#_function',            data: {                art: ""            },            methods: {                getClick: function () {                    this.art = "梵高";                },                getChange: function () {                    this.art = "达文西";                }            }        })        new Vue({            el: "#_ifAndFor",            data: {                father: []            },            methods: {            },            mounted: function () {                for (var i = 0; i < 10; i++) {                    this.father.push('son' + i);                }            }        })    </script></html>
阅读全文
0 0