创建下拉框：
&div id="chart-shopname" class="chart-shopname"&
&select v-model="selected" @change="changeShop"&
&option disabled value=""&请选择&/option&
v-for="(store,index) in secondSummary.t0RealtimeStoreList" :value="store.shopName"&{{store.shopName}}&/option&
点击相应选项，出现相应数据，试了用watch监听，然后发现一种更简单的方法
changeShop(){
this.secondSummary.t0RealtimeStoreList.forEach(item=&{
if(this.selected === item.shopName){
this.secondSummary20 = item.totalTop20P
直接用if 判断selected，然后调用
阅读(...) 评论()在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
&select class="BonusType" v-model="selected[0]" v-bind:disabled="disabled[0]" v-on:click="SelectClick"&
&option v-bind:value="Item.id" v-for="Item in BonusType" v-bind:disabled="isActive[Item.id-1]?'disabled':null"&{{Item.text}}&/option&
如上所示,想在SelectClick中传入Item.id参数
通过比较id来确定该option选项是否禁用 但是直接传Item.id会报错 麻烦大家帮忙看下有没有好的解决办法
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
option 上绑定 disable 属性
&select class="BonusType" v-model="selected[0]" v-bind:disabled="disabled[0]"&
&option v-bind:value="Item.id" v-for="Item in BonusType" v-bind:disabled="Item.IsDisabled"&{{Item.text}}&/option&
看不懂你的逻辑。。。也许你是想这样？
&select class="BonusType" v-model="selected[0]" v-bind:disabled="disabled[0]"&
&option v-bind:value="Item.id" v-for="Item in BonusType" v-on:click="SelectClick(item.id)"&{{Item.text}}&/option&
这样就能传入 id 了
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。vue新手求助。v-for和v-if在同级渲染出多个元素，如何单独更改其中一个元素的显示/隐藏
<a data-traceid="question_detail_above_text_l&&
在自制一个能增删改的todolist练手，模仿www.todolist.cn，做到重新编辑todo内容时卡住了，在官方没总结出解决方案，所以在这里求助。以下。点击文字变成input修改，但效果是这样的 因为我v-if绑定的是同一个变量，所以肯定会全局改掉，但对vue的理解太浅，想不到有效的办法。 代码：`
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&NBtodoList&/title&
&link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"&
&script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"&&/script&
background: #CDCDCD;
height: 50
line-height: 50
background: #323232;
.headerForm label{
color: #DDDDDD;
font-size: 20
.headerForm input{
margin-top: 8
font-weight:
margin: 20px 0;
list-style:
height: 40
background: #
border-radius: 5
line-height: 40
border-left: 5px solid #629A9C;
margin-bottom: 10
.oLi .check{
height: 22
height: 40
padding: 0;
text-align:
line-height: 40
font-size: 18
.oLi span{
.oLi .txt{
line-height: 50
display: inline-
padding-left: 5
padding-left: 0;
&/head&&body&
&div id="app"&
&header class="container-fluid"&
&div class="container"&
&div class="headerForm form-group center-block clearfix"&
&label for="todocontent" class="pull-left col-xs-3"&ToDoList&/label&
&div class="col-xs-9 pull-right"&
&input autofocus type="text" id="todocontent" class="form-control" v-model='todoText' v-on:keyup.enter='addTodo' placeholder="添加ToDo"&
&section class="container"&
&div class="center-block" style="padding: 0 15px"&
&my-h2 v-bind:num='noNum' status='正在进行'&&/my-h2&
&my-li v-for='(todo,index) in todoList' v-bind:to='todo' v-on:deltodo='deltodos(index)' v-on:todook='dotoDown(index)' v-on:childrevamp="revamp" v-bind:childisrevamp="isRevamp"&&/my-li&
&my-h2 v-bind:num='okNum' status='已经完成'&&/my-h2&
&my-li style="opacity: .5" v-for='(oktodo,index) in oktodoList' v-bind:childchecked="checked" v-bind:okto='oktodo' v-on:deltodo='deloktodos(index)' v-on:todook='dotoUp(index)' childisrevamp="ture"&&/my-li&
&/section&
&/body&&script&
Vue.component('my-li',{
props:['to','okto','childchecked','childisrevamp'],
template: '&li class="oLi"&&input type="checkbox" v-model="childchecked"
v-on:change="todook" class="check col-xs-1"/&&p class="pull-left col-xs-10"&&span v-on:click="childrevamp" v-if="childisrevamp"&{{to}}{{okto}}&/span&&input v-on:blur="childrevamp"
v-if="!childisrevamp" class="txt form-control"&&/input&&/p&&i href="#" v-on:click="deltodo" class="pull-right col-xs-1 glyphicon glyphicon-remove"&&/i&&/li&',
methods: {
childAddTodo: function(){
this.$emit('childAddTodo')
deltodo: function(){
this.$emit('deltodo');
todook: function(){
this.$emit('todook');
childrevamp: function(){
this.$emit('childrevamp');
Vue.component('my-h2',{
props: ['num','status'],
template: '&h2 class="h2"&{{status}}&span class="pull-right badge" style="margin-top: 8"&{{num}}&/span&&/h2&'
el: '#app',
todoText: '',
todoList: [],
okTodoText: '',
oktodoList: [],
checked: true,
isRevamp: true
methods: {
addTodo: function(){
this.todoText.trim() ? this.todoList.push((this.todoText).trim()) : alert('你输嘞不对~');
localStorage.notodo = JSON.stringify(this.todoList);
this.noNum = this.todoList.
this.todoText = '';
deltodos: function(index){
this.todoList.splice(index,1);
localStorage.notodo = JSON.stringify(this.todoList);
this.noNum = this.todoList.
deloktodos: function(index){
this.oktodoList.splice(index,1);
localStorage.oktodo = JSON.stringify(this.oktodoList);
this.okNum = this.oktodoList.
dotoDown: function(index){
this.oktodoList.push(this.todoList[index]);
localStorage.oktodo = JSON.stringify(this.oktodoList);
this.deltodos(index);
this.okNum = this.oktodoList.
dotoUp: function(index){
this.todoList.push(this.oktodoList[index]);
localStorage.notodo = JSON.stringify(this.todoList);
this.deloktodos(index);
localStorage.oktodo = JSON.stringify(this.oktodoList);
this.noNum = this.todoList.
revamp: function(){
this.isRevamp = !this.isR
created:function(){
this.todoList = localStorage.notodo ? JSON.parse(localStorage.notodo) : [];
this.oktodoList = localStorage.oktodo ? JSON.parse(localStorage.oktodo) : [];
this.noNum = this.todoList.
this.okNum = this.oktodoList.
有什么办法能够在触发revamp事件后只让当前的span隐藏，input显示呢？求大牛指教！
&!--demo.vue 我也菜鸟 这是我个人思路--&
&template&
&div class="box"&
&div class="box-w100"&
&div class="modal-content"&
&table class="product-table"&
&thead id="fixed-header"&
&th class="nowrap"&单號&/th&
&th&名稱&/th&
&th&電話&/th&
&th class="text-center"&详情&/th&
&th class="text-center"&操作&/th&
&template v-for="(order,index) in orderlist"&
&!--如果是修改状态 且修改的index对应则显示修改框--&
&tr v-if="isupdate && updateindex==index"&
&input v-model="order.ordernumber" class="underline-input"&&/input&
&input v-model="order.name" class="underline-input"&&/input&
&input v-model="order.phone" class="underline-input"&&/input&
&td class="nowrap text-center"&
&input v-model="order.detail" class="underline-input"&&/input&
&button v-on:click="submitupdate"&保存&/button& {{index}} &button v-on:click="cancelupdate"&取消&/button&
&tr v-else&&!--否则显示--&
&td&{{order.ordernumber}}&/td&
&td &{{order.name}}&/td&
{{order.phone}}
&td class="nowrap text-center"&
{{order.detail}}
&button v-if="!isupdate" v-on:click="removeorder(index)"&删除&/button& {{index}} &button v-on:click="openupdate(index)"&修改&/button&
&/template&
&/template&
export default{
name: 'searchorder',
isupdate:false,//控制是否是修改操作
updateindex:0,//控制显示哪个修改input
orderlist:this.getdata()//测试数据
getdata:function(){
var arry=[];
for(let i=0;i&50;i++){
let order={ordernumber:i+"",name:i+"理",phone:i+"",detail:"洗发水、沐浴露"};
arry.push(order);
removeorder:function(index){
if(!this.isupdate){
if(confirm("确定删除吗？")){
this.orderlist.splice(index, 1);
openupdate:function(index){
if(!this.isupdate)this.isupdate=//显示修改框
this.updateindex=//显示对应的修改框
submitupdate:function(){
if(this.isupdate)this.isupdate=//隐藏修改框
cancelupdate:function(){
if(this.isupdate)this.isupdate=
this.orderlist=this.getdata();在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
1.在用vuejs写一个功能时，用v-for遍历一个列表，每个列表中都包含一个select控件，但是当我删除这个列表中的一个项时，删的不是我指定的那个项？
2.贴上代码：
&div class="item" v-for="(todo,index) in todos"&
&div class="choose-block"&
&span class="remove-btn" v-on:click="removeTodo(index)"&x&/span&
&choose-spec&&/choose-spec&
&div class="add-btn"&
&a href="javascript:;"&+ 添加&/a&
var vm = new Vue({
el: '#app',
todos: [],
methods: {
appendTodo: function(){
this.todos.push(this.i++);
removeTodo: function(index){
this.todos.splice(index,1);
//this.todos.splice(this.todos.indexOf(todo),1);
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
首先确定你的vue版本是1还是2？
1的v-for参数顺序是 (index, value)
2的v-for参数顺序是 (value, index)
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。Vue下拉列表实例（组件的使用） - 简书
Vue下拉列表实例（组件的使用）
组件化的概念
Web 中的组件其实就是页面组成的一部分，好比是电脑中的每一个元件（如硬盘、键盘、鼠标），它是一个具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，变成一个完整的应用，页面就是有一个个类似这样的部分组成，比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器，组件自由组合形成功能完善的界面，当不需要某个组件，或者想要替换某个组件时，可以随时进行替换和删除，而不影响整个应用的运行。
组件化的特性
高内聚性，组建功能必须是完整的，如我要实现下拉菜单功能，那在下拉菜单这个组件中，就把下拉菜单所需要的所有功能全部实现。
低耦合度，通俗点说，代码独立不会和项目中的其他代码发生冲突。在实际工程中，我们经常会涉及到团队协作，传统按照业务线去编写代码的方式，就很容易相互冲突，所以运用组件化方式就可大大避免这种冲突的存在、
每一个组件都有子集清晰的职责，完整的功能，较低的耦合便于单元测试和重复利用。
组件化的优点
提高开发效率
方便重复使用
简化调试步骤
提升整个项目的可维护性
便于协同开发
Vue中的组件
vue 中的组件是一个自定义标签形式，Vue.js的编译器为它添加特殊功能；
vue也可以扩展原生的html元素，封装可重用的代码。
vue组件的构成
样式及结构
组件注册必须在指定实例之前执行。
建议将组件提取出来放在单独js文件中，按需引用
可以在任何模版中使用，使用之前必须先注册
Vue.component(tagName, options)
“驼峰”格式，或者“烤串”格式, 组件引用名必须一致
&custom-select&&/custom-select&
Vue.component("custom-select", {
template: `&section class="wrap"&
&section class="searchIpt clearFix"&
&section class="clearFix"&
&input type="text" class="keyWord" /&
&input type="button" value="Go" /&
&span&&/span&
&/section&
&ul class="list"&
&li&111111&/li&
&li&2222&/li&
&li&3333&/li&
&li&4444&/li&
&li&5555&/li&
&li&6666&/li&
&/section&
&/section& `,
通过使用组件实例选项注册，可以使组件仅在另一个指定实例/组件的作用域中可用
el: '#app',
//组件队列
components: {
//组件名称
"custom-select": {
template: `&section class="wrap"&
&section class="searchIpt clearFix"&
&section class="clearFix"&
&input type="text" class="keyWord" /&
&input type="button" value="查询" /&
&span&&/span&
&/section&
&ul class="list"&
&li&111111&/li&
&li&2222&/li&
&li&3333&/li&
&li&4444&/li&
&li&5555&/li&
&li&6666&/li&
&/section&
&/section&`
"test-dom": {
template: `&p&测试文字&/p&`
也可以将组件对象抽离用一变量缓存出来，如下：
var Temp = {
template: `&section class="wrap"&
&section class="searchIpt clearFix"&
&section class="clearFix"&
&input type="text" class="keyWord" /&
&input type="button" value="查询" /&
&span&&/span&
&/section&
&ul class="list"&
&li&111111&/li&
&li&2222&/li&
&li&3333&/li&
&li&4444&/li&
&li&5555&/li&
&li&6666&/li&
&/section&
&/section&`
el: "#app",
components: {
// &custom-select& 将只在父模板可用
'custom-select': Child,
组件间的通信
父组件要给自组件传递数据，子组件需要将它内部发生的事情告知给父组件。
组件中的数据
组件中的数据必须是函数， 如果它们共用一个对象，在更改其中一个组件数据时，也会影响到其它的组件。
换做函数形式，每个组件都能够有自己独立的数据，从而不会影响到其它的组件，有点像解耦的概念。
组件信息传递
父组件 =&子组件
在父级组件上使用自定义属性绑定数据；
2.使用props声明自定义属性名
子组件 =&父组件
在父级组件上绑定自定义事件v-on监听自定义事件；2. 使用$emit()触发父组件所关心的自定义事件。
父组件 =&子组件
组件实例的作用域是孤立的，不能在子组件直接用父组件的数据。
可以在组件上使用自定义属性绑定数据，在组件中需要显式的用选项参数props声明自定义属性名。
子组件 =&父组件
需要用到自定义事件，父组件用$on监听自定义事件，使用$emit()触发父组件所关心的自定义事件。
&custom-select btn-value="查询" :list="list1"&&/custom-select&
&custom-select btn-value="搜索" :list="list2"& &/custom-select&
Vue.component("custom-select", {
!此处数据类型必须是一个函数形式，不能直接写对象。
每个组件都是相互独立的，如果它们共用一个对象，在更改一个组件数据的时候，会影响到其它
组件，如果是函数的话，每个组件就都有自己的独立数据，相互之间不会影响。
data: function() {
selectShow: false,
props: ["btnValue", "list"],
template: `&section class="wrap"&
&section class="searchIpt clearFix"&
&section class="clearFix"&
&input type="text" class="keyWord" :value="val"
@click="selectShow=!selectShow"/&
&input type="button" :value="btnValue" /&
&span&&/span&
&/section&
&custom-list v-show="selectShow" :list="list"
@receive="changeValueHandle"&&/custom-list&
&/section&
&/section&`,
methods: {
changeValueHandle(value) {
this.val =
//将选中的值赋给指定的input
this.selectShow =
//隐藏下拉框
Vue.component("custom-list", {
props: ["list"],
template: `
&ul class="list"&
&li v-for="item in list" @click="selectValueHandle(item)"&{{item}}&/li&
methods: {
selectValueHandle(item) {
//在子组件中触发，需要一个自定义事件
// Key值 是父级的自定义事件
this.$emit("receive", item);
el: '#app',
data: function() {
list1: ["北京", "上海", "广州", "深圳"],
list2: ["", "", "", ""],
特殊属性is
Vue是在浏览器解析和标准化HTML后才获取模版内容，某些不符合W3C标准的dom结构最终会被错误解析。
通过使用is来扩展HTML标签功能可以解决。
&tr is="custom-select"&&/tr&
错误的写法
使用is来解析
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
低仿饿了么 H5 - 纯前端 Vue 版 + 手把手教学 - 前端 - 掘金低仿饿了么H5-纯前端Vue版+手把手教学 这是一个低仿饿了么H5的纯前端练手，数据是伪造的，写的比较粗糙，写这个的目的是为了加深一下熟练度，半年前看到别人写的仿cnodejs网站，我也用vue1仿...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
清晰记得，听得第一首民谣是赵雷的《南方姑娘》。那时候，不知道赵雷是谁，不理解歌词的含义，纯粹是喜欢整首歌的旋律，温软，动听，扣人心扉……
爱上写作是在爱上民谣之前，但是后来民谣就成了我写作的源泉，自然而然也就成为了我一直坚持写作的动力。他们都说:“说自己喜欢听民...
最近失眠越发严重，时常过一点才睡。睡意缱绻的爬上心心念念的床，洗白白擦香香了躺好，却总是约不到周公。我定认为他不是伪娘就是gay，又或者她本就是女人，不近女色的女人。 如我这般聪明的小朋友，痛苦的失眠时间怎么可能让它很难受。肯定会胡思乱想啦。天马行空的思绪，好非啊。 我无法...
01 赵客缦胡缨，吴钩霜雪明。银鞍照白马，飒沓如流星。十步杀一人，千里不留行。事了拂衣去，深藏身与名。闲过信陵饮，脱剑膝前横。将炙啖朱亥，持觞劝侯赢。三杯吐然诺，五岳倒为轻。眼花耳热后，意气素霓生。救赵挥金锤，邯郸先震惊。千秋二壮士，烜赫大梁城。纵死侠骨香，不惭世上英。谁能...
好想你。这样说好像有点矫情，但我真的挺想你的，从大一开始，每次和你相遇都会觉得很开心，我很喜欢你的性格，很喜欢你的处事，总感觉你和我有一些相似的地方，但我们交集的地方也只有在社团，尤其是在你后来选择退出后，好像也很难再会相遇，遇到了也只能打个招呼而已。因为，你很忙，大一你就...
很多销售员在销售的过程中，是以个人盈利为目的的销售原则。我们试想下，一个客户需要花多少时间培养？如果为了自己的利益而伤害到客户，以后还想不想合作？所以，如果我们要想长远的发展，就必须站在客户的角度看待问题。 那怎么才算站在客户的角度呢？我们能给客户提供什么？先从自身上面找原...