Vue2学习的两个小案例

JUANのWEB

已于 2024-05-15 15:39:06 修改

阅读量345

点赞数 3

分类专栏： Vue 2 文章标签：前端学习 javascript vue.js

于 2024-05-15 15:37:06 首次发布

本文链接：https://blog.csdn.net/m0_63241410/article/details/138910439

版权

Vue 2 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、使用Vue做一个字符翻转的案例

利用了split()方法分割字符串
再使用reserve()方法翻转字符串
最后使用join()方法将分割的字符串拼接起来

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<h1>{{msg}}</h1>
		<button @click="tog">逆转世界</button>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
	<script>
		const app = new Vue({
			el:"#app",
			data:{
				msg:"学习Vue,憨憨是帅猫猫"
			},
			methods:{
				tog(){
					// msg = this.masg
					
					// 首先取得字符串的值，然后用split分割字符串。
					console.log(this.msg.split(''))
					// 然后用reverse的方法反转字符串
					console.log(this.msg.split('').reverse())
					// 最后用join方法将字符拼接起来
					console.log(this.msg)
					this.msg = this.msg.split('').reverse().join('')
				}
			}
		})
	</script>
</body>
</html>

实现效果如下：

二、使用Vue做一个收起展开的案例

1.首先对容器做一个css样式

 body {
      background-color: #ccc;
    }

    #app {
      width: 400px;
      margin: 20px auto;
      background-color: #fff;
      border: 4px solid blueviolet;
      border-radius: 1em;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
      padding: 1em 2em 2em;
    }

    #app h3 {
      text-align: center;
    }

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #ccc;
      padding: 0 1em;
    }

    .title h4 {
      line-height: 2;
      margin: 0;
    }

    .container {
      border: 1px solid #ccc;
      padding: 0 1em;
    }

    .btn {
      /* 鼠标改成手的形状 */
      cursor: pointer;
    }

2.基本页面搭建

<div id="app">
    <h3>案例：折叠面板</h3>
    <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <span @click="fn" class="btn">
         {{msg}}
        </span>
      </div>
      <div v-show="isShow" class="container">
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </div>
    </div>
  </div>

3.Vue语法实现

 const app = new Vue({
      el: '#app',
	  data:{
		  isShow:true,
		  msg:'收起'
	  },
	  
	  methods:{
		 fn(){
			 this.isShow = !this.isShow
			 if(this.msg === '收起'){
				 this.msg = "展开"
			 }else{
				 this.msg = "收起"
			 }
		 }
	  }
    })

实现效果如下：