条件渲染和事件绑定 - JavaScript

首页 > 博客列表 > 条件渲染和事件绑定

博主信息

博文 47

粉丝 0

访问量 31333

专题推荐

更多>

1.列表渲染

<!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>列表渲染</title>
    <script src="https://unpkg.com/vue@3"></script>
    <style>
        li::marker{
            content: none;
        }
    </style>
</head>
<body>
    <!-- 1.原生：<script>
        const ul = document.createElement('ul');
        const arr = ['wuhan','beijing','congqin'];
        for(let i of arr)
        {
            let li = document.createElement('li');
            li.append(i);
            ul.append(li);
        }
        document.body.append(ul);
    </script> -->
    <!--Vue 1: <div class="app">
        <ul>
            <li>{{City[0]}}</li>
            <li>{{City[1]}}</li>
            <li>{{City[2]}}</li>
        </ul>
    </div> -->
    <hr>
    <div class="app">
        <ul>
            <!-- <li v-for="(city,index) of City" :key = "index">{{city}}</li> -->
            <!-- 上下相等<li v-for="city of City">{{city}}</li> -->
            <li v-for="(message) of Messages">{{message['name']}}:{{message['email']}}</li>
        </ul>
    </div>
     <script>
        Vue.createApp({
        data(){
            return {
                City:['wuhan','beijing','congqin'],
                Messages:[
                    {name:'yk',email:'yk@.com'},
                    {name:'yk',email:'yk@.com'},
                   { name:'yk',email:'yk@.com'}
                ] 
            }
        }
    }).mount('.app');
     </script>
</body>
</html>

2.双向绑定

<!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>双向绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div class="app">
    <p>
        <input type="text" v-model = "comment" :value="comment">
        <span>{{comment}}</span>
    </p>
</div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    comment :null,
                }
            }
        }).mount('.app');
    </script>
</body>
</html>

3.事件绑定

<!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></title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <!-- <div class="first">
        <a href="www.baidu.com" onclick="showUrl()">Url</a>
        <p></p>
    </div>
    <script>
        function showUrl()
        {
            //事件禁止跳转
            event.preventDefault();
            event.target.nextElementSibling.textContent = event.target.href;
        }
    </script> -->
    <div class="app">
        <a href="www.baidu.com" @click="showUrl($event)">Url</a>
        <!-- 等价于：<a href="www.baidu.com" v-on:click="showUrl($event)">Url</a> -->
        <p class="url">{{url}}</p>
    </div>
    <script>
        Vue.createApp({
            data(){
                return {
                    url:null
                }
            },
            methods:{
                showUrl(ev)
                {
                    ev.preventDefault();
                    ev.stopImmediatePropagation();
                    this.url = ev.target.href;
                }
            }
        }).mount('.app');
    </script>
</body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

仿PHP中文网右侧布局

2022-07-18 14:56:59