Community Learn Tools Library Leisure
search
English
Home > List of blog posts > vue编程，简单标签 v-text v-html v-once v-bind:属性名 v-bind:style="" v-bind:class v-on:事件名
Blogger Information
Blog 19
fans 0
comment 0
visits 10677
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
vue编程，简单标签 v-text v-html v-once v-bind:属性名 v-bind:style="" v-bind:class v-on:事件名
无名小辈
Original
455 people have browsed it

v-bind:属性名 简写:属性名
v-bind:style=””
v-bind:class

v-on:事件名 简写:事件名
v-on:click
v-on:input

<!DOCTYPE html>
<html lang="en">

  1. <head>
  2. <meta charset="UTF-8">
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <title>Vue编程</title>
  6. <!-- <script src="https://unpkg.com/vue@3"></script> -->
  7. <script src="vue.js"></script>
  8. <style>
  9.     .p {
  10.         padding: 1px;
  11.     }
  13.     .m {
  14.         margin: 10px;
  15.     }
  17.     .b {
  18.         border: 1px solid #343434;
  19.     }
  21.     .br {
  22.         border-radius: 10px;
  23.     }
  25.     .bag {
  26.         background-color: aqua;
  27.     }
  29.     .bag2 {
  30.         background-color: blanchedalmond;
  31.     }
  33.     .c {
  34.         color: blueviolet;
  35.     }
  36. </style>
  37. </head>
  39. <body>
  40. <div id="app">
  42.     <div v-bind:style="red" v-text="message"></div>
  43.     <div v-bind:style={color:color,backgroundColor:bgc} v-text="message2"></div>
  44.     <div v-bind:style=[mycolor,mybgc] v-text="message3"></div>
  46.     <div v-bind:class="'c'" v-text="message4"></div>
  48.     <div v-bind:class="moreclass" v-text="message5"></div>
  50.     <div v-bind:class={c:true,bag2:true} v-text="message6"></div>
  52.     <div v-bind:class=[mycolor2,mybgc2] v-text="message7"></div>
  53.     <div v-bind:class=['bag2','b'] v-text="message8"></div>
  55.     <div>
  56.         <input type="text" value="测试" v-on:input="comment=$event.target.value" />
  57.         <span>{{comment}}</span>
  58.     </div>
  59.     <div>
  60.         <input type="text" v-model.lazy="comment2" />
  61.         <span>{{comment2}}</span>
  62.     </div>
  63. </div>
  65. <script>
  66.     const { createApp } = Vue
  68.     createApp({
  69.         data() {
  70.             return {
  71.                 message: 'message1 Hello Vue66!',
  72.                 red: 'color:red',
  74.                 message2: 'message2 绑定样式，字面量形式',
  75.                 color: 'blue',
  76.                 bgc: 'green',
  78.                 message3: ' message3 绑定样式，数组形式',
  79.                 mycolor: 'color:red',
  80.                 mybgc: 'background-color:wheat',
  82.                 message4: ' message4 绑定class，给样式做绑定',
  85.                 message5: ' message5 绑定class，用变量名，给样式做绑定',
  87.                 moreclass: 'c  bag',
  89.                 message6: 'message6 绑定class，用字面量的形式，来给类名做判断，真就赋值，假就不给赋值',
  91.                 message7: 'message7 绑定class，数组里面存的是变量，在变量中存放多个样式的名字',
  92.                 mycolor2: 'c br b',
  93.                 mybgc2: 'bag2',
  95.                 message8: 'message8 绑定class，数组里面存的是样式名，直接显示，不再调用',
  96.                 comment: null,
  97.                 comment2: '我这里做延时',
  99.             }
  100.         }
  101.     }).mount('#app')
  104. </script>
  105. </body>
  107. </html>
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