vue（5）联动+tab页

来自：https://juejin.im/post/5a0c191f6fb9a04514639419

1、联动

新增 <input v-model="msg" />

<div id="app">
  <!-- 模板，用于展示数据 -->
  {{msg}}<br/>
  <input v-model="msg" />
</div>

效果

当删除/修改/新增 文本框中的字符时，上边的也会跟着一起变。

2、选项卡

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/vue.js"></script>
  <style>
    body {
      font-family: "Microsoft YaHei";
    }

    #tab {
      width: 600px;
      margin: 0 auto;
    }

    .tab-tit {
      font-size: 0;
      width: 600px;
    }

    .tab-tit a {
      display: inline-block;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      width: 25%;
      text-align: center;
      background: #ccc;
      color: #333;
      text-decoration: none;
    }

    .tab-tit .cur {
      background: #09f;
      color: #fff;
    }

    .tab-con div {
      border: 1px solid #ccc;
      height: 400px;
      padding-top: 20px;
    }
  </style>
</head>

<body>
  <div id="tab">
    <div class="tab-tit">
      <!--点击设置curId的值  如果curId等于0，第一个a添加cur类名，如果curId等于1，第二个a添加cur类名，以此类推。添加了cur类名，a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式-->
      <a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">html</a>
      <a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a>
      <a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a>
      <a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a>
    </div>
    <div class="tab-con">
      <!--根据curId的值显示div,如果curId等于0，第一个div显示，其它三个div不显示。如果curId等于1，第二个div显示，其它三个div不显示。以此类推-->
      <div v-show="curId===0">
        html
        <br/>
      </div>
      <div v-show="curId===1">
        css
      </div>
      <div v-show="curId===2">
        javascript
      </div>
      <div v-show="curId===3">
        vue
      </div>
    </div>
  </div>
</body>

<script>
  new Vue({
    el: '#tab',
    data() {
      return {
        curId: 0
      }
    },
    computed: {},
    methods: {},
    mounted: function () {
    }
  })
</script>
</html>

 

posted @ 2019-02-01 15:10  遥远2  阅读(342)  评论(0)  编辑  收藏  举报