Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 条件渲染和事件绑定
Blogger Information
Blog 47
fans 0
comment 0
visits 21053
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
条件渲染和事件绑定
P粉036614676
Original
334 people have browsed it

1.列表渲染

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>列表渲染</title>
  8.     <script src="https://unpkg.com/vue@3"></script>
  9.     <style>
  10.         li::marker{
  11.             content: none;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <!-- 1.原生：<script>
  17.         const ul = document.createElement('ul');
  18.         const arr = ['wuhan','beijing','congqin'];
  19.         for(let i of arr)
  20.         {
  21.             let li = document.createElement('li');
  22.             li.append(i);
  23.             ul.append(li);
  24.         }
  25.         document.body.append(ul);
  26.     </script> -->
  28.     <!--Vue 1: <div class="app">
  29.         <ul>
  30.             <li>{{City[0]}}</li>
  31.             <li>{{City[1]}}</li>
  32.             <li>{{City[2]}}</li>
  33.         </ul>
  34.     </div> -->
  35.     <hr>
  36.     <div class="app">
  37.         <ul>
  38.             <!-- <li v-for="(city,index) of City" :key = "index">{{city}}</li> -->
  39.             <!-- 上下相等<li v-for="city of City">{{city}}</li> -->
  40.             <li v-for="(message) of Messages">{{message['name']}}:{{message['email']}}</li>
  41.         </ul>
  42.     </div>
  43.      <script>
  44.         Vue.createApp({
  45.         data(){
  46.             return {
  47.                 City:['wuhan','beijing','congqin'],
  48.                 Messages:[
  49.                     {name:'yk',email:'yk@.com'},
  50.                     {name:'yk',email:'yk@.com'},
  51.                    { name:'yk',email:'yk@.com'}
  52.                 ] 
  53.             }
  54.         }
  55.     }).mount('.app');
  56.      </script>
  57. </body>
  58. </html>

2.双向绑定

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>双向绑定</title>
  8.     <script src="https://unpkg.com/vue@3"></script>
  9. </head>
  10. <body>
  11.     <div class="app">
  12.     <p>
  13.         <input type="text" v-model = "comment" :value="comment">
  14.         <span>{{comment}}</span>
  15.     </p>
  16. </div>
  17.     <script>
  18.         const app = Vue.createApp({
  19.             data(){
  20.                 return {
  21.                     comment :null,
  22.                 }
  23.             }
  24.         }).mount('.app');
  25.     </script>
  26. </body>
  27. </html>

3.事件绑定

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script src="https://unpkg.com/vue@3"></script>
  9. </head>
  10. <body>
  11.     <!-- <div class="first">
  12.         <a href="www.baidu.com" onclick="showUrl()">Url</a>
  13.         <p></p>
  14.     </div>
  16.     <script>
  17.         function showUrl()
  18.         {
  19.             //事件禁止跳转
  20.             event.preventDefault();
  21.             event.target.nextElementSibling.textContent = event.target.href;
  22.         }
  23.     </script> -->
  24.     <div class="app">
  25.         <a href="www.baidu.com" @click="showUrl($event)">Url</a>
  26.         <!-- 等价于：<a href="www.baidu.com" v-on:click="showUrl($event)">Url</a> -->
  27.         <p class="url">{{url}}</p>
  28.     </div>
  30.     <script>
  31.         Vue.createApp({
  32.             data(){
  33.                 return {
  34.                     url:null
  35.                 }
  36.             },
  37.             methods:{
  38.                 showUrl(ev)
  39.                 {
  40.                     ev.preventDefault();
  41.                     ev.stopImmediatePropagation();
  42.                     this.url = ev.target.href;
  43.                 }
  44.             }
  45.         }).mount('.app');
  46.     </script>
  47. </body>
  48. </html>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post