master

分支 (1)

管理

管理

master

lesson_yy
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<style>
    .active{
        width: 200px;
    }
</style>
<body>
    <div id="app">
        <p>{{message}}</p>
        <!-- <div v-if="isLogin">heelo:tom</div>
        <div v-else="isLogin">please login</div> -->
        <div v-show="isLogin">hello:tom</div>
        <hr>
        <ul>
            <li v-for="item in items">{{item}}</li>
        </ul>
        <hr>
        <p>
            <span v-text="span1"></span>
            <span>{{span1}}</span>
            <span v-html='span2'></span>
        </p>
        <hr>
        scores:<span>{{count}}</span>
        <button v-on:click='add'>+</button>
        <button @click='reduce'>-</button>
        <hr>
        <input type="text" placeholder="please enter" v-model="inputVal" v-on:keyup.enter="enter">
        <p>input.value:{{inputVal}}</p>
        <hr>
        <img :src="imgUrl" alt="error" :class="{'active':isOk}">
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data: {
                message: 'hello Vue',
                isLogin:false,
                items:[10,11,12,13,14,15],
                span1:'hello',
                span2:'<h2>hello</h2>',
                count:0,
                inputVal:'',
                imgUrl:"https://img0.baidu.com/it/u=1967997459,1022958762&fm=26&fmt=auto",
                isOk:true,
            },
            methods:{
                add() {
                    this.count++
                },
                reduce() {
                    this.count--
                },
                enter(e) {
                    console.log(e);
                }
            }
        });

    </script>
</body>
</html>