两个控件

1、切换点击状态

<html>
<!--https://cdn.jsdelivr.net/npm/vue/dist/vue.js -->
<body>
<script src="vue.js"></script>
    <div id="app">
        {{ message }}
        <ul>
            <li :class="{ 'defult-li': liCur!=0, 'active-li': liCur==0}" @click="liCur=0"><h4 ><a>1</a> </h4>  </li>
            <li :class="{ 'defult-li': liCur!=1, 'active-li': liCur==1}" @click="liCur=1"><h4 ><a>2</a> </h4>  </li>
            <li :class="{ 'defult-li': liCur!=2, 'active-li': liCur==2}" @click="liCur=2"><h4 ><a>3</a> </h4>  </li>
        </ul>

    </div>
</body>
<style>
  .defult-li{
    border: 2px solid  #b3d4fc;
  }
  .active-li{
    border-left: 2px solid #2880ff;
  }
   
</style>
<script>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        liCur:0
    }
})

</script>

2.

搜索

<html>

<!--https://cdn.jsdelivr.net/npm/vue/dist/vue.js -->
<body>
<script src="vue.js"></script>
    <div id="app">
    


    <form method="GET" action="">
        <div class="input-group">
            <input id="search-input" class="form-control" v-model="message" autocomplete="off" spellcheck="off" name="q" placeholder="Search all of Protex" type="text">
            <span class="input-group-btn" >
                <button  v-on:click="searchClicked"  class="btn btn-primary" type="submit">Search</button>
            </span>
        </div>
        <div id="search-dropdown">
        </div>
    </form>

    </div>


</body>
<style>

.form-control {
    display: inline-block;
    width: 200px;
    height: 36px;
    line-height: 36px;
    padding: 6px 12px;
    font-size: 14px;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    color: #fff;
    background-color: #428bca;
    border-color: #357ebd;
    height: 35px;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
}

</style>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        },
        methods:{
            searchClicked(){
                alert(1)
            }
        }
    })

</script>
</html>

 

posted @ 2019-06-04 19:18  cnchengv  阅读(63)  评论(0)    收藏  举报