vue demo详解
vue 2017-11-14 10:27:53

 

JavaScript Code复制内容到剪贴板
  1. <!--生产-结算养费-->    
  2. <template>    
  3.     <div class="container-fluid px-0" id="procution-support">    
  4.         <button @click="toArea()">测试</button>    
  5.     
  6.         <h1 v-text="title"></h1>    
  7.     
  8.         <span v-if="showBar">是否展示</span>    
  9.     
  10.         <div>    
  11.             <ul>    
  12.                 <li v-for="item in arr">    
  13.                     <p><span v-text="item.name"></span>,<span v-text="item.age"></span></p>    
  14.                 </li>    
  15.             </ul>    
  16.         </div>    
  17.     </div>    
  18. </template>    
  19.     
  20. <script>    
  21.     export default {    
  22.         name: 'procution-support',    
  23.         data () {    
  24.             return {    
  25.                 title: '',    
  26.                 showBar: true, // true展示，false不展示    
  27.                 arr: []    
  28.             }    
  29.         },    
  30.         mounted: function(){ // 这个是页面创建的时候，就执行相关的方法    
  31.             this.getData()    
  32.             this.packageArray()    
  33.         },    
  34.         methods: { // 这里放方法，方法之间用逗号隔开    
  35.             getData () {    
  36.                 // 假如这里是一块ajax请求，请求成功后，获取到title    
  37.                 this.title = '页面标题'    
  38.             },    
  39.             toArea () {    
  40.                 this.arr = [    
  41.                     {name: '测试1', age: 17},    
  42.                     {name: '测试2', age: 18},    
  43.                     {name: '测试3', age: 19},    
  44.                     {name: '测试4', age: 20}    
  45.                 ]    
  46.                 console.log('aaa')    
  47.             },    
  48.             packageArray () {    
  49. //                this.arr = [    
  50. //                    {name: '测试1', age: 17},    
  51. //                    {name: '测试2', age: 18},    
  52. //                    {name: '测试3', age: 19},    
  53. //                    {name: '测试4', age: 20}    
  54. //                ]    
  55.             }    
  56.         }    
  57.     }    
  58. </script>    

 

本文来自于：http://www.yoyo88.cn/study/vue/204.html

上一篇 vue 表单绑定值 input绑定事件
下一篇 JS数组判断值是否存在于指定数组中
相关的文章
Powered by yoyo苏ICP备15045725号