Vue-Day 01 小案例练习

1.翻转数组

Vue-Day 01 案例分享 - 图1

  1. <template>
  2. <div>
  3.   <h1>{{msg}}</h1>
  4.   <button @click="reverse">翻转世界</button>
  5. </div>
  6. </template>
  8. <script>
  9. export default {
  10.   name: 'App',
  11.   data(){
  12.     return{
  13.       msg:'hello world',
  14.     }
  15.   },
  16.   methods:{
  17.     reverse(){
  18.       const arr = this.msg.split("");
  19.       arr.reverse();
  20.       this.msg=arr.join("");
  21.     }
  22.   }
  23. }
  24. </script>
  26. <style>
  27. </style>

2.折叠面板

Vue-Day 01 案例分享 - 图2

  1. <template>
  2.   <div>
  3.     <h1>静夜思<button @click="control">{{show ? '收起' : '展开'}}</button></h1>
  4.     <div v-if="show">
  5.       <p>床前明月光</p>
  6.       <p>疑是地上霜</p>
  7.       <p>举头望明月</p>
  8.       <p>低头思故乡</p>
  9.     </div>
  10.   </div>
  11. </template>
  13. <script>
  14. export default {
  15.   name: "App",
  16.   data(){
  17.     return{
  18.       show:true
  19.     }
  20.   },
  21.   methods:{
  22.     control(){
  23.       this.show = !this.show;
  24.     }
  25.   }
  26. };
  27. </script>
  29. <style>
  30. </style>

3.综合小案例

Vue-Day 01 案例分享 - 图3

  1. <template>
  2.   <div>
  3.     <!-- 标题部分 -->
  4.     <h1 class="title" v-show="!show">
  5.       {{title}}
  6.       <span class="tag">{{cs}}</span>
  7.       <a class="edit-btn" @click="xs">编辑</a>
  8.     </h1>
  10.     <!-- 编辑内容 -->
  11.     <div v-show="show">
  12.       <div class="input-group">标题：<input type="text" v-model="writeTitle"/></div>
  13.       <div class="input-group">
  14.         频道：<select v-model="changeCs">
  15.           <option value="前端">前端</option>
  16.           <option value="测试">测试</option>
  17.           <option value="Java">Java</option>
  18.         </select>
  19.       </div>
  20.       <div class="operation">
  21.         <button class="cancel" @click="show = false">取消</button>
  22.         <button class="confirm" @click="ok">确认</button>
  23.       </div>
  24.     </div>
  25.   </div>
  26. </template>
  28. <script>
  29. export default {
  30.   // 1.先让输入框的内容隐藏
  31.   // 2.当点击编辑的时候 显示输入框 并且 隐藏标题栏 让标题取反
  32.   // 3.点击取消的 退回标题栏   <button class="cancel" @click="show = false">取消</button>
  33.   //   点击确认  退回标题栏
  34.   // 4.把标题和频道 先用数据绑定好 写死
  35.   // 5.更新数据 让标题 和 频道的数据双向数据绑定 一改则改
  36.   // 当点击编辑 打开编辑框时  原来的数据 会显示在输入框上
  37.   data(){
  38.     return{
  39.       show:false,
  40.       title:'hello world',
  41.       cs:'前端',
  42.       writeTitle:'',
  43.       changeCs:'',
  44.     }
  45.   },
  46.   methods:{
  47.     // 点击编辑  显示到输入框上 <= 旧数据
  48.     xs(){
  49.       this.show = true;
  50.       this.writeTitle = this.title;
  51.       this.changeCs = this.cs;
  52.     },
  53.     // 点击确定  更新掉旧数据 new显示到标题上 <= 新数据
  54.     ok(){
  55.       // 当输入框为空 确定回不到标题上
  56.       if(this.writeTitle===''){
  57.       return;
  58.     }
  59.       this.show = false;
  60.       this.title = this.writeTitle;
  61.       this.cs = this.changeCs;
  62.     }
  64.   }
  65. };
  66. </script>
  68. <style>
  69. .title {
  70.   display: flex;
  71.   align-items: center;
  72. }
  74. .tag {
  75.   margin-left: 8px;
  76.   padding: 3px 6px;
  77.   border-radius: 8px;
  78.   background-color: green;
  79.   font-size: 0.6em;
  80.   color: #fff;
  81. }
  83. .edit-btn {
  84.   margin-left: 32px;
  85.   font-size: 0.8em;
  86.   color: lightskyblue;
  87. }
  89. .input-group {
  90.   margin-top: 16px;
  91.   font-size: 28px;
  92. }
  94. .input-group input,
  95. .input-group select {
  96.   width: 300px;
  97.   border-color: #ddd;
  98.   font-size: 28px;
  99. }
  101. .operation {
  102.   margin-top: 16px;
  103. }
  105. .cancel {
  106.   margin-left: 85px;
  107.   background-color: #ddd;
  108. }
  110. .cancel,
  111. .confirm {
  112.   padding: 8px 24px;
  113.   border: 0;
  114.   border-radius: 4px;
  115. }
  117. .confirm {
  118.   margin-left: 16px;
  119.   background-color: #006699;
  120.   color: #fff;
  121. }
  122. </style>

空白案例 可以对齐进行练习

  1. <template>
  2.   <div>
  3.     <!-- 标题部分 -->
  4.     <h1 class="title">
  5.       标题
  6.       <span class="tag">测试</span>
  7.       <a class="edit-btn">编辑</a>
  8.     </h1>
  10.     <!-- 编辑内容 -->
  11.     <div>
  12.       <div class="input-group">标题：<input type="text" /></div>
  13.       <div class="input-group">
  14.         频道：<select>
  15.           <option value="前端">前端</option>
  16.           <option value="测试">测试</option>
  17.           <option value="Java">Java</option>
  18.         </select>
  19.       </div>
  20.       <div class="operation">
  21.         <button class="cancel">取消</button>
  22.         <button class="confirm">确认</button>
  23.       </div>
  24.     </div>
  25.   </div>
  26. </template>
  28. <script>
  29. export default {
  30. };
  31. </script>
  33. <style>
  34. .title {
  35.   display: flex;
  36.   align-items: center;
  37. }
  39. .tag {
  40.   margin-left: 8px;
  41.   padding: 3px 6px;
  42.   border-radius: 8px;
  43.   background-color: green;
  44.   font-size: 0.6em;
  45.   color: #fff;
  46. }
  48. .edit-btn {
  49.   margin-left: 32px;
  50.   font-size: 0.8em;
  51.   color: lightskyblue;
  52. }
  54. .input-group {
  55.   margin-top: 16px;
  56.   font-size: 28px;
  57. }
  59. .input-group input,
  60. .input-group select {
  61.   width: 300px;
  62.   border-color: #ddd;
  63.   font-size: 28px;
  64. }
  66. .operation {
  67.   margin-top: 16px;
  68. }
  70. .cancel {
  71.   margin-left: 85px;
  72.   background-color: #ddd;
  73. }
  75. .cancel,
  76. .confirm {
  77.   padding: 8px 24px;
  78.   border: 0;
  79.   border-radius: 4px;
  80. }
  82. .confirm {
  83.   margin-left: 16px;
  84.   background-color: #006699;
  85.   color: #fff;
  86. }
  87. </style>