博客列表 >vue编程,简单标签 v-text v-html v-once v-bind:属性名 v-bind:style="" v-bind:class v-on:事件名

vue编程,简单标签 v-text v-html v-once v-bind:属性名 v-bind:style="" v-bind:class v-on:事件名

无名小辈
无名小辈原创
2022年08月13日 20:43:58454浏览

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. }
  12. .m {
  13. margin: 10px;
  14. }
  15. .b {
  16. border: 1px solid #343434;
  17. }
  18. .br {
  19. border-radius: 10px;
  20. }
  21. .bag {
  22. background-color: aqua;
  23. }
  24. .bag2 {
  25. background-color: blanchedalmond;
  26. }
  27. .c {
  28. color: blueviolet;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <div id="app">
  34. <div v-bind:style="red" v-text="message"></div>
  35. <div v-bind:style={color:color,backgroundColor:bgc} v-text="message2"></div>
  36. <div v-bind:style=[mycolor,mybgc] v-text="message3"></div>
  37. <div v-bind:class="'c'" v-text="message4"></div>
  38. <div v-bind:class="moreclass" v-text="message5"></div>
  39. <div v-bind:class={c:true,bag2:true} v-text="message6"></div>
  40. <div v-bind:class=[mycolor2,mybgc2] v-text="message7"></div>
  41. <div v-bind:class=['bag2','b'] v-text="message8"></div>
  42. <div>
  43. <input type="text" value="测试" v-on:input="comment=$event.target.value" />
  44. <span>{{comment}}</span>
  45. </div>
  46. <div>
  47. <input type="text" v-model.lazy="comment2" />
  48. <span>{{comment2}}</span>
  49. </div>
  50. </div>
  51. <script>
  52. const { createApp } = Vue
  53. createApp({
  54. data() {
  55. return {
  56. message: 'message1 Hello Vue66!',
  57. red: 'color:red',
  58. message2: 'message2 绑定样式,字面量形式',
  59. color: 'blue',
  60. bgc: 'green',
  61. message3: ' message3 绑定样式,数组形式',
  62. mycolor: 'color:red',
  63. mybgc: 'background-color:wheat',
  64. message4: ' message4 绑定class,给样式做绑定',
  65. message5: ' message5 绑定class,用变量名,给样式做绑定',
  66. moreclass: 'c bag',
  67. message6: 'message6 绑定class,用字面量的形式,来给类名做判断,真就赋值,假就不给赋值',
  68. message7: 'message7 绑定class,数组里面存的是变量,在变量中存放多个样式的名字',
  69. mycolor2: 'c br b',
  70. mybgc2: 'bag2',
  71. message8: 'message8 绑定class,数组里面存的是样式名,直接显示,不再调用',
  72. comment: null,
  73. comment2: '我这里做延时',
  74. }
  75. }
  76. }).mount('#app')
  77. </script>
  78. </body>
  79. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议