devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue官方文档笔记(选项式)

作者：很楠不爱3 | 2024-04-23 17:33:43

赞

踩

vue官方文档笔记(选项式)

1.响应式

  1. <script>
  2. export default {
  3.   data(){
  4.     return{
  5.       message:'hello',
  6.       counter:{
  7.       	count:1
  8.       }
  9.     }
  10.   }
  11. }
  12. </script>
  13.  
  14. <template>
  15.   <h1>{{message}}</h1>
  16.   <h1>{{counter.count}}</h1>
  17. </template>

2.v-bind:缩写成:

  1. <script>
  2. export default {
  3.   data() {
  4.     return {
  5.       titleClass: 'title'
  6.     }
  7.   }
  8. }
  9. </script>
  10.  
  11. <template>
  12.   <h1 :class='titleClass'>Make me red</h1> 
  13. </template>
  14.  
  15. <style>
  16. .title {
  17.   color: red;
  18. }
  19. </style>

3.v-on:缩写成@ 

  1. <script>
  2. export default {
  3.   data() {
  4.     return {
  5.       count: 0
  6.     }
  7.   },
  8.   
  9.   methods:{
  10.   	plus(){
  11.       this.count=this.count+1
  12.     }
  13.   }
  14. }
  15. </script>
  16.  
  17. <template>
  18.   <!-- 使此按钮生效 -->
  19.   <button @click='plus'>count is: {{ count }}</button>
  20. </template>

4.v-model绑定

  1. <script>
  2. export default {
  3.   data() {
  4.     return {
  5.       text: ''
  6.     }
  7.   },
  8. }
  9. </script>
  10.  
  11. <template>
  12.   <input v-model='text'>
  13.   <p>{{ text }}</p>
  14. </template>

 

5.条件渲染

  1. <script>
  2. export default {
  3.   data() {
  4.     return {
  5.       awesome: true
  6.     }
  7.   },
  8.   methods: {
  9.     toggle() {
  10.       this.awesome=!this.awesome
  11.     }
  12.   }
  13. }
  14. </script>
  15.  
  16. <template>
  17.   <button @click="toggle">toggle</button>
  18.   <h1 v-if='awesome'>Vue is awesome!</h1>
  19.   <h1 v-else>Oh no 
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/475185
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。