发布：2021/11/16 9:48:40作者：管理员 来源：本站 浏览次数：1018
前言：应公司开发，某小功能的需要，所以初次接触到vuejs，摸索学习中，还不熟练，只是简单分享一些公司开发中遇到的一些问题，有不足的地方欢迎留言讨论。2.点击下拉框，选中一栏数据，同时input从没有值变成同步更新到选中的那一栏值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/base.css" rel="stylesheet" />
<link href="css/index.css" rel="stylesheet" />
</head>
<body>
<header>
<div class="container">
<div class="menu">
<a href="/"><img src="" alt="logo" /></a>
<a href="/">首页</a>
<a href="/">市场</a>
<a href="/">精品</a>
<a href="/">免费</a>
<div class="search" id="search">
<div class="search-box">
<input class="search-input-text" type="text" value="" placeholder="请输入关键词" />
<div class="search-select">
<h6>全站<i class="fa fa-sort-desc fa-1-5x"></i></h6>
<ul>
<li>源码</li>
<li>全站</li>
</ul>
</div>
<a href="javascript:void(0)" class="search-btn">搜索</a>
</div>
<p class="clear">
<a href="/">微信</a>
<a href="/">支付宝</a>
<a href="/">银行</a>
</p>
<select @change="test" v-model="aaa">
<option v-for="item in list" :value="item.id">
{{item.name}}
</option>
</select>
<input type="text" v-model="bbb" />
</div>
</div>
</div>
</header>
<div class="container clear">
<div class="col-lg-4 col-sm-12 bg-color-blue">1</div>
<div class="col-lg-4 col-sm-12 bg-color-green">2</div>
<div class="col-lg-4 col-sm-12 bg-color-red">3</div>
</div>
<footer>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/vue2.6.11.js"></script>
<script>
$(function () {
var vx = new Vue({
el: "#search",
data: {
list: [],
aaa: "",
bbb:""
},
methods: {
getServerGroup: function () {
var _self = this;
_self.list = [{ id: 1, name: '全站' }, {id:2,name:'源码'}];
},
test: function () {
this.bbb = this.aaa;
}
}
});
vx.getServerGroup();
$(".search-select>h6").click(function () {
$('.search-select>ul').toggle();
});
});
</script>
</footer>
</body>
</html>
© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4