Vue.js小试

参考网址https://www.cnblogs.com/rik28/p/6024425.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>

    <script src="vue.js"></script>

    <link href="demo.css" rel="stylesheet" />
</head>
<body>
    <div id="app">
        {{ message }}
        <div> <input type="text" v-model="message" /></div>
        <span v-if="YES">yes!1</span><br />
        <span v-if="NO">no!1</span><br />
        <span v-if="Age>=10">Age:{{Age}}</span><br />
        <span v-if="Name.indexOf('jack')>=0">Name:{{Name}}</span><br />
        <span v-show="Name.indexOf('jack')>=0">Name:{{Name}}</span><br />
        <div><input type="text" name="name" v-model="Age" value="" /></div>
        <span><input type="text" name="name" v-model="Name" value="" /> </span>
    </div>
    <h1>-----------------------------------------------------</h1><br />
    <div id="app2">
        <span>{{Sex}}</span><br />
        <span v-if="Age>=20">{{Sex}}</span>
        <span v-else>{{Age}} </span>
        <input type="text" v-model="Age" name="name" value="" />
    </div>
    <h1>-----------------------------------------------------</h1><br />
    <div id="app3">
        <table>
            <thead>
                <tr>
                    <td>名字</td>
                    <td>年龄</td>
                    <td>电话</td>
                </tr>
            </thead>
            <tbody>

                <tr v-for="item in peopers">
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.phone}}</td>
                </tr>

            </tbody>
        </table>
    </div>
    <h1>-----------------------------------------------------</h1><br />
    <div id="app4">
        <ul class="pagination">
            <li v-for="n in totalPage">
                <a href="#" v-bind:class="CurrentPage===n?'active':'' ">{{n}}</a>
            </li>
        </ul>
    </div>
    <h1>-----------------------------------------------------</h1><br />
    <div id="app5">
        <button value="测试5-1" @click="getstr('测试1')">测试5-1</button>
        <button value="测试5-2" @click="getstr2()">测试5-2</button> 
    </div>



</body>
</html>
<script>
    // 这是我们的Model
    var exampleData = {
        message: 'Hello World!',
        YES: true,
        NO: false,
        Age: 24,
        Name: 'jack'
    }
    // 创建一个 Vue 实例或 "ViewModel"
    // 它连接 View 与 Model
    new Vue({
        el: '#app',
        data: exampleData
    })
    //测试2
    var model2 = {
        Sex: 'Male',
        Age: 12

    }
    new Vue({
        el: '#app2',
        data: model2
    })
    //测试3
    var model3 = {
        peopers: [
            { name: 'l', age: 18, phone: '135' },
            { name: 'z', age: 18, phone: '135' },
            { name: 'j', age: 18, phone: '135' }
        ]
    }
    new Vue({
        el: '#app3',
        data: model3
    })
    //测试4
    var model4 = {
        CurrentPage: 1,
        totalPage: 10
    }
    var vm = new Vue({
        el: '#app4',
        data: model4
    })
    //测试5
    var vm5 = new Vue({
        el: '#app5',
        data: {
            strsss:'测试2'
        },
        methods:{
            getstr: function (trt) {
                alert(trt)
            },
            getstr2: function () {
                alert(this.strsss)
            }
        }



    })
</script>

　　

posted @ 2019-12-08 14:49  我的技术控件  阅读(140)  评论(0)    收藏  举报