关于vue.js输出组件的id问题 5C

以下是运行环境以及代码.
http://jsfiddle.net/50wL7mdz/93626

我的问题是:我要怎么把 todo.id 输入到屏幕上.
这是一个官方文档的例子.
https://cn.vuejs.org/v2/guide/list.html#一个组件的-v-for
但是我一直没搞懂.

6个回答

把html中的那个 v-bind:key=todo.id 改成 v-bind : id = todo.id 就好了

你的这个问题其实是在vue.js的组件模块遇到的。你的js中已经定义了组件,并在组建中给了{{id}}-{{title}}的输出。这个时候你在你的html中定义了
你的

(is表示)是下边的组件的复用。在你下边的组件中,你在props定义了两个属性,id和title。这说明这两个东西是父组件传递给你的(可以查看父子组件传递)。然后你必须在上边的html中传递这两个值,但是你只传递了一个title,所以你的id是空的,所以加上v-bind:id="todo.id"就行了。楼上的解释虽然解决了问题,但是在2.2+的vue.js版本中列表循环(v-for)的key属性是十分必要的,如果不写回产生其他问题。

在指定位置输入定界符加变量即可输出

根据你的示例,其实你在todo-item这个组件里,是已经定义了id和title如何显示的了。
{{id}} -{{title}}
现在,没有显示的原因是,你在调用这个组件时,没有把组件的id属性绑定进去,方法就是:在v-bind:key = "todo.id"的上面,再增加一个 v-bind:id="todo.id",
相对完整的代码,在HTML中如下:

   <ul>
    <li
      is="todo-item"
      v-for="(todo, index ) in todos"
     _** v-bind:id="todo.id"  **_
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>

希望能帮助你的理解,谢谢~~

is="todo-item"
v-for="(todo, index ) in todos"
v-bind:key="todo.id"
v-bind:title="todo.title"
v-bind:id="todo.id"
v-on:remove="todos.splice(index, 1)"
>

上面大家说了,加一行 v-bind:id="todo.id" 就能解决问题

另,楼主的疑问可能是
v-bind:key="todo.id"
v-bind:id="todo.id"
首先, v-bind:key="todo.id"的意思是,在列表渲染中,给每一个todo设置一个用于区分的值,这个值是todo.id;这个key相当于每一个todo的唯
一标识,并不是向组件中传值,这个key在vue的列表渲染中现在是必须的,每个v-for都必须有:key,否则会发出警告
其次,vue父组件向子组件中传值使用v-bind:name = value,如之前的代码,然后在子组件中用props接收方可使用
楼主在上面例子中,使用todo.id作为todo的唯一标识,但是它的值并没有传入子组件中,所以需要添加 v-bind:id="todo.id"这行代码

另:v-bind:可以缩写为:,如 v-bind:id="todo.id"等价于:id="todo.id";v-bind:key="todo.id"等价于:key="todo.id"

v-bind:title="todo.title"改成v-bind:title="todo.id"

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Vue.js 关于Vue.js中样式引入问题
``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js组件</title> </head> <body> <div id="app"> <counter heading="完美极了" bgcolor="green"></counter> <counter heading="糟糕透了" bgcolor="red"></counter> </div> <template id="mycounter"> <div class=""> <h1>{{ heading }}</h1> <button type="button" name="button" @click="plus" style="background:{{ bgcolor }}">赞赞赞{{ count }}</button> </div> </template> <script src="vue.js" type="text/javascript"></script> <script type="text/javascript"> Vue.component("counter",{ template:"#mycounter", data:function(){ return { count : 0}; }, props:["heading","bgcolor"], methods : { plus : function(){ this.count += 1; } } }); new Vue({ el : "#app" }); </script> </body> </html> ``` 上面的代码中 <button type="button" name="button" @click="plus" style="background:{{ bgcolor }}">赞赞赞{{ count }}</button> 这一行报错,报错信息为: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div style="{{ val }}">, use <div :style="val">. 改为: <button type="button" name="button" @click="plus" v-bind:style="background:{{ bgcolor }}">赞赞赞{{ count }}</button> 后仍然报错! 请问大家,这里应该怎么正确引入父组件传过来的bgcolor作为button的背景色?
VUE.JS插件提示插件未定义怎么解决?
html代码如下 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>插件</title> </head> <body> <div id="test"> <p v-my-directive='msg'></p> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="../js/vue-myPlugin.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> Vue.use(MyPlugin) Vue.myGlobalMethod() const vm=new Vue({ el:'#test', data:{ msg:'I liKe EaT' } }) vm.$myMethod() </script> </body> </html> ``` 插件代码如下 ``` (function(){ const MyPlugin={} MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { console.log("执行了myGlobalMethod方法") } // 2. 添加全局资源 Vue.directive('my-directive',function(el,binding){ el.textContent = binding.value.toLowerCase() }) // 3. 注入组件选项 // Vue.mixin({ // created: function () { // // 逻辑... // } // ... // }) // 4. 添加实例方法 Vue.prototype.$myMethod = function(){ console.log("执行了$myMethod实例方法") } } //向外暴露 window.MyPlugin=MyPlugin }) `` 都是照着网课老师的代码敲得,不知道哪里出错了一直提示 Uncaught ReferenceError: MyPlugin is not defined 求问各路大佬怎么解决
vue 引入外部组件的正确写法应该是怎样的
正确应该怎么写??我自己琢磨的,怎么写怎么错。。网上没有入门的说明,只有入门后的一堆说明。。 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <runoob></runoob> </div> <script> import runoob from './js/test.vue'; //引用 // 创建根实例 new Vue({ el: '#app', components:{ 'runoob':runoob } }) </script> </body> </html> `` 外部组件test.vue` ```<template> <h1>自定义组件!</h1> </template> <script> export default { name: "runoob" } </script> <style> </style> ```
关于 vue 父子组件之间的通信问题
请各位大神帮我看看问题在哪里,不知道为啥传值失败了,小弟初学前端,功力太浅,望各位大神指教! 这是 html 部分: ![图片说明](https://img-ask.csdn.net/upload/201907/23/1563870679_740417.png) 这是 js 部分: ![图片说明](https://img-ask.csdn.net/upload/201907/23/1563870839_855272.png) 多谢各位大神! ---------------------------------------更新线--------------------------------- 这是源代码: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <div> <input v-model="parentMsg"> <br> <child v-bind:message="parentMsg" @fromChild="change"></child> </div> </div> <script> // 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '<span @click="toParent">{{ message }}</span>', methods: { toParent: function () { this.$emit('fromChild', '子向父传值,改变父的值。'); console.log("It has worked!"); } } }) // 创建根实例 new Vue({ el: '#app', data: { parentMsg: '父组件内容' }, methods: { change: function (msg) { this.parentMsg = msg; console.log(msg);//没有结果,控制台没报错。 } } }) </script> </body> </html> ```
Vue.js怎么嵌套后,页面渲染失败?求解答
``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <script src="node_modules/vue-router/dist/vue-router.js"></script> <style> .router-link-active { font-size: 20px; color: red; } </style> </head> <body> <div id="box"> <ul> <li> <router-link to='/home'>主页</router-link> </li> <li> <router-link to='/news'>新闻</router-link> </li> </ul> <!--路由配置的组件将会渲染在这里--> <div> <router-view></router-view> </div> </div> <template id="home"> <h3>我是主页</h3> <div> <ul> <li> <router-link to='/home/login'>登陆</router-link> </li> <li> <router-link to='/home/resgist'>注册</router-link> </li> </ul> </div> <h2>{{$route.params.id}}</h2> <div> <router-view></router-view> </div> </template> <template id="news"> <div> <h3>我是新闻</h3> <ul> <li> <router-link to='/news/detail'>详细</router-link> </li> </ul> </div> <div> <router-view></router-view> </div> </template> <template id="login"> <div> <p>请登录</p> </div> <div> <router-view></router-view> </div> </template> <template id="resgist"> <div> <p>请注册</p> </div> <div> <router-view></router-view> </div> </template> <template id="detail"> <div> <!-- <h2>Details:{{$route.params.id}}</h2>--> </div> <div> <router-view></router-view> </div> </template> </body> <script> var Home = { template: '#home' }; var News = { template: '#news' }; var Login = { template: '#login' } var Resgist = { template: '#resgist' } var Detail = { template: '#detail' } //创建router实例 var router = new VueRouter({ routes: [ { path: '/home/:id', component: Home, children: [ {path: 'login', component: Login}, {path: 'resgist', component: Resgist} ] }, { path: '/news/:id', component: News, children: [ {path: 'detail', component: Detail} ] } ] }); //创建和挂载根实例 var app = new Vue({ router: router }).$mount('#box'); </script> </html> ```
关于Vue自定义组件的错误
``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript"></script> </head> <body> <div id="app"> <fuqin></fuqin> </div> <template id="t1"> <div> 父组件, {{attr}} <erzi></erzi> </div> </template> <template id="t2"> <div> 子组件, {{attr1}} </div> </template> <script type="text/javascript"> var vm=new Vue({ el:'#app', components:{ "fuqin":{ template:"#t1", data(){ return{ attr:"父组件的数据" } } }, components:{ 'erzi':{ template:"#t2", data(){ return{ attr1:"子组件的数据" } } } } } }); </script> </body> </html> ``` 大佬帮我看看哪错了 这里是报错: [Vue warn]: Unknown custom element: <erzi> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <Fuqin> <Root>
Vue子组件没法传值给父组件,一直报错
请教下各位大佬@choose=changeEvent到底哪里定义错了,一直想不通 ``` <!DOCTYPE html> <html lang = "en" > <head > <meta charset = "UTF-8" > <title >Title</title > <style > </style > </head > <body > <div id="app"> <ul> <school v-for="item ,index in schoolList" :school-name="item" :key="'avc'+index" :index="index" @choose="changeEvent"> </school> </ul> <h2>选中的学校是{{chooseSchool}}</h2> </div> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" > Vue.component("school",{ props:["schoolName"], template: ` <li> <h3>学校名称:{{schoolName}}</h3> <button v-on:click="chooseEvent(schoolName)" >选择学校</button> </li>`, methods:{ chooseEvent:function (schoolName) { this.$emit('choose',schoolName); }, }, }); const app=new Vue({ el:"#app", data:{ chooseSchool:"", schoolList:["清华大学","北京大学","东京大学"], methods:{ changeEvent:function (data) { console.log("hahha"); this.chooseSchool=data; } } } }) </script > </body > </html > ```
关于Vue中v-for遍历的问题
如图: 使用semanticUI 的tab组件,要实现这个tab切换效果, ![图片说明](https://img-ask.csdn.net/upload/202001/29/1580301878_788972.png) 在静态页面可以切换: 这是原始代码 ``` $('.menu .item').tab(); ---------------------------------- <div class="ui top attached tabular menu"> <a class="active item" data-tab="first">First</a> <a class="item" data-tab="second">Second</a> <a class="item" data-tab="third">Third</a> </div> <div class="ui bottom attached active tab segment" data-tab="first"> First </div> <div class="ui bottom attached tab segment" data-tab="second"> Second </div> <div class="ui bottom attached tab segment" data-tab="third"> Third </div> ``` 我想要实现 的效果是 使用 vue 获取到后台传递过来的tab标签里的分类数据, 点击标签,下方自动切换到对应的div. 自己的代码: ``` <div id="workArea" class="m-container m-padded-tb-big"> <div class="ui top attached tabular menu"> <a v-for="c in categories" class="item" data-tab="first">{{ c.name}}</a> </div> <div class="ui bottom attached active tab segment" data-tab="first"> First </div> </div> ``` 达到这个效果 ![图片说明](https://img-ask.csdn.net/upload/202001/29/1580302472_363102.png) 我想请问一下这个下面的div 要怎么写才能实现这样一个vue切换效果呢 下面是全部代码: ``` <!DOCTYPE html> <html xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <title>工具</title> <link rel="stylesheet" type="text/css" href="../../static/css/me.css" th:href="@{/css/me.css}"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"> </head> <body style="background: #439B78;"> <div style="height: 20px;"></div> <div id="workArea" class="m-container m-padded-tb-big"> <div class="ui top attached tabular menu"> <a v-for="c in categories" class="active item" data-tab="first">{{ c.name}}</a> </div> <div class="ui bottom attached active tab segment" data-tab="first"> First </div> </div> <script src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script> <script src="../../static/js/vue.min.js" th:src="@{/js/vue.min.js}"></script> <script src="../../static/js/axios.min.js" th:src="@{/js/axios.min.js}"></script> <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script> <script type="text/javascript"> $(function(){ var data1 = { uri: 'forekit', categories: [] }; var vue = new Vue({ el: '#workArea', data: data1, mounted:function(){ this.load(); }, methods:{ load: function() { var url = this.uri; axios.get(url).then(function(response){ vue.categories = response.data; }); } } }); $('.menu .item').tab(); }); </script> </body> </html> ```
Vue 组件使用require动态加载图片错误
## 1.问题: 未使用require,图片渲染一次后再没有变化,检查html相关embed属性的src是已经变化过了的,路径变化正确。**** 使用require,抛出Module name "images/Departs/dep-7.svg" has not been loaded yet for context,图片直接不加载,控制台也报错,检查html的embed属性,发现没有渲染 ## 2.Vue的子组件代码 ``` Vue.component('keshi-img', { props: ['pname'], template: '<embed :src = require(getImgUrl()) >', //使用require created() { console.log(this.pname); }, methods: { getImgUrl() { return "images/Departs/dep-" + this.pname + ".svg" } } }); ``` ##Vue的父组件代码 ``` <div class="col-md-3 text-center" v-for="dep in deps"> <div class="col-lg-12 rounded border"> <keshi-img :pname=dep.KeShiId></keshi-img> //将唯一标识的id传递给子组件 <h4 class="text-success">{{dep.KeShiName}}</h4> <p><button class="btn btn-secondary" role="button" @click="KeShiDetail(dep.KeShiId)">科室详情 »</button></p> </div> </div> ``` ##3.报错 使用require的报错 ![使用require的报错](https://img-ask.csdn.net/upload/202003/14/1584200998_10554.png) 观测html的embed(自定义组件未加载) ![自定义组件未加载](https://img-ask.csdn.net/upload/202003/14/1584201229_71594.png)
vue-loader安装后在.vue里的<style></style>里面写样式就报错?
提问:请问下,vue-loader也安装了为何在.vue的style标签了 还是不能写样式呢?webpack4,使用webpack-dev-server命令打包时就报错.应该如何解决? 我已经尝试卸载vue-loader重新安装,删除node-modules重新跑环境,但并没有解决掉.难到是某个加载器的版本的问题吗? main.js ``` import Vue from 'vue'; import app from './App.vue'; import { Header } from 'mint-ui'; Vue.component(Header.name, Header); var vm=new Vue({ el:'#app', render:c=>c(app) }); ``` App.vue ``` <template> <div class="box"> <!--header--> <mt-header fixed title="固定在顶部"></mt-header> <!--body--> <!--foot--> <h1>这是 App 组件</h1> </div> </template> <script> </script> <style lang="sass" scoped> .box{ padding-top:40px; } </style> ``` package.json ``` "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-component": "^0.10.1", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.6.1", "babel-preset-stage-0": "^6.24.1", "css-loader": "^0.28.7", "file-loader": "^1.1.5", "html-webpack-plugin": "^2.30.1", "less": "^2.7.3", "less-loader": "^4.0.5", "node-sass": "^4.5.3", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "vue-loader": "^13.3.0", "vue-template-compiler": "^2.5.2", "webpack": "^3.8.1", "webpack-dev-server": "^2.9.3" }, "dependencies": { "bootstrap": "^3.3.7", "mint-ui": "^2.2.9", "vue": "^2.5.2", "vue-router": "^3.0.1" } } ``` 错误提示: ``` ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped": true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?indentedSyntax!./node_modules/vue-loader/lib/selector .js?type=styles&index=0!./src/App.vue Module build failed: .box{ ^ Invalid CSS after ".box{": expected "}", was "{" in F:\vuetest\day7\src\App.vue (line 19, column 6) @ ./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":" data-v-7ba5bd90","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?indentedSyntax!./node_modul es/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-331 13:3-17:5 14:22-339 @ ./src/App.vue @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/main.js
vue的<component>怎么动态获取绑定的多个组件的props的值
vue的<component>怎么动态获取绑定的多个组件的props的值?这是一个tab切换的demo,三个切换按钮,点击切换对应的组件显示。新手一枚,这么写在选中组件1没选中的另外两个组件的情况下总显示caseconts2="[object Object],[object Object],[object Object],[object Object]"和caseconts2="[object Object],[object Object],[object Object],[object Object]" ``` <div class="casetabs"> <ul class="clearfloat"> <li @click="toggleTabs(index,tab.view)" v-for="(tab,index) in casetabs" :class="{case_on:case_on==index}">{{ tab.type }}</li> </ul> </div> <component :is="currentView" :caseconts1="caseconts1" :caseconts2="caseconts2" :caseconts3="caseconts3"></component> ``` ``` Vue.component("case1", { template: `#casecont`, props: ['caseconts1'], data() { return { }, } } }) Vue.component("case3", { template: `#casecont`, props: ['caseconts1'], data() { return { }, } } }) Vue.component("case2", { template: `#casecont`, props: ['caseconts1'], data() { return { }, } } }) ``` caseconts1,caseconts2,casecont3是json获取的 ``` var app = new Vue({ el: '#dre', data: { casetabs: [ { type: '最新案例', view: 'case1' }, { type: '热门案例', view: 'case2' }, { type: '经典案例', view: 'case3' } ], caseconts1:[], caseconts2:[], caseconts3:[], }, mounted: function () { this.$nextTick(function () { app.cartView(); }) }, methods: { cartView: function () { var _this = this; this.$http.get("data/index.json", { "id": 123 }).then(function (response) { _this.caseconts1 = response.data.result.caseconts1; _this.caseconts2 = response.data.result.caseconts2; _this.caseconts3 = response.data.result.caseconts3; }); ``` ![图片说明](https://img-ask.csdn.net/upload/201906/14/1560485189_69296.png)
Vue点击事件无效:Invalid handler for event "click": got undefined
描述: 定义了单击事件,但是使用Vue组件生成的标签就检测不到单击的方法,并报错:Invalid handler for event "click": got undefined 把标签放到外面可以正常使用,使用Vue组件生成后就报错,而且msg这个也找不到了 请问该如何处理?以下是全部代码 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="container"> <div id="navbar_left"> <pr></pr> </div> </div> <script> Vue.component("pr",{ name:"pr", template:"<p @click='this.toggle'>{{msg}}</p>", data(){ return{ open:true } } }); var app = new Vue({ el:"#navbar_left", data:{ msg:"hello world", }, methods:{ toggle(){ this.open = !this.open } }, }); </script> </body> </html> ```
创建vue组件过程中,无错误提示,却显示不出
在浏览器控制台,都没提示错误,但是页面中为什么显示不出 ``` <body> <div id="app"> <my-com></my-com> </div> <script> var Com1 = Vue.extend({ template: '<div><h3>这是</h3></div>' }) Vue.component("my-com", Com1) var vm = new Vue({ el:'', data: {}, methods: {}, }); </script> </body> ```
萌新求教Vue组件里的:和@有什么作用
比如下面这段教程里的代码 ``` <div id="root"> <div> <input type="text" v-model="inputValue"> <button @click="handleSubmit">提交</button> </div> <ul> <todo-item v-for="(item ,index) of list" :key="index" :content="item" :index="index" @delete='handleDelete' ></todo-item> </ul> </div> <script> Vue.component('todo-item',{ props: ['content','index'], //接收从外部传递进来的content属性 template:'<li @click="handleDeleteItem">{{content}}</li>', methods:{ handleDeleteItem:function(){ this.$emit('delete',this.index); } } }) new Vue({ el:"#root", data:{ inputValue:'', list:[] }, methods:{ handleSubmit:function(){ this.list.push(this.inputValue); this.inputValue=''; }, handleDelete:function(index){ this.list.splice(index,1); } } }) </script> ``` 请问第八行开始的:key之类的还有下面的@delete有什么作用,相互之间有什么关系
请问各位大神,如下Vue的代码中为何这个局部组件无法使用??
代码如下: <body> <div id="app"> <localcom></localcom> </div> <script src="../node_modules/vue/dist/vue.js"></script> <script> //定义局部组件 const localcom = { template:"<button @click='msg++'>{{msg}}</button>", data(){ return{ msg:0 } } }; const app = new Vue({ el:"#app", comments:{ localcom } }); </script> </body> console中报错为 [Vue warn]: Unknown custom element: <localcom> - did you register the component correctly? For recursive components, make sure to provide the "name" option. 请各位大佬帮忙查看一下哪里有问题
vue里的组件之间传值,用query传回来 渲染对应的input
![图片说明](https://img-ask.csdn.net/upload/201910/17/1571304210_755589.jpg) ![图片说明](https://img-ask.csdn.net/upload/201910/17/1571304195_78182.jpg) 这两张图片是组件chooseClass的,问题点击确定以后要把 query: { classId: item.id, className: item.name, lecturerName: item.lecturername, assistantName: item.assistantname }; 这个传入到组件addLargeClass组件里,并且跳转到这个页面,重新渲染input,现在是点击确定不管事,addLargeClass组件里JS部分怎么写?
在vue中使用element-ui时, SyntaxError: export declarations may only appear at top level of a module
这是我调用的代码: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 先引入vue.js --> <script src="node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <template> <el-checkbox-group v-model="checkedCities1" :min="1" :max="2"> <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox> </el-checkbox-group> </template> </div> <script type="text/javascript"> const cityOptions = ['上海', '北京', '广州', '深圳']; export default { data() { return { checkedCities1: ['上海', '北京'], cities: cityOptions }; } }; new Vue({ el:'#app', data:{ } }) </script> </body> </html> ``` 这是element-ui官方的模板: ![图片说明](https://img-ask.csdn.net/upload/201902/24/1551010099_972895.png) 请问:我写的方式不对吗
vue插槽 prop 是 undefined 的时候,定义后备内容出错是为什么?求大佬举个例子
官方描述: 定义后备内容,用于插槽 prop 是 undefined 的情形: ``` <current-user v-slot="{ user = { firstName: 'Guest' } }"> {{ user.firstName }} </current-user> ``` 我写的: ``` //父组件 <myvue v-slot="{user={firstName:'sdad'}}"> xx{{user.firstName}} </myvue> //子组件 <template> <div> <slot v-bind:user="users"></slot> </div> </template> <script> export default { name: 'myvue', props:["user"], data(){ return{ users:{ firstName:undefined, lastName:'lastname' } } } } </script> ``` 然后不知道为什么报错了: ``` Failed to compile. ./src/App.vue Module Error (from ./node_modules/eslint-loader/index.js): error: Parsing error: Line 1: Unexpected token > 1 | 0({user={firstName:'sdad'}}) | ^ (vue/no-parsing-error) at src\App.vue:3:22: 1 | <template> 2 | <div id="app"> > 3 | <myvue v-slot="{user={firstName:'sdad'}}"> | ^ 4 | xx{{user.firstName}} 5 | </myvue> 6 | <img alt="Vue logo" src="./assets/logo.png"> 1 error found. ```
vue使用swiper组件获得activeIndex后,如何实现实时监听activeIndex,如果发生变化则设置flag属性为false
vue使用swiper组件获得activeIndex后,如何实现实时监听activeIndex,如果发生变化则设置flag属性为false ``` <swiper :options="swiperOption" ref="Myswper"> <swiper-slide v-for="card in itemcard" :key="card.id"> <img>//循环数据展示 </swiper-slide> </swiper> ``` ``` data () { return { // swiper默认配置 swiperOption: { slidesPerView: 'auto', spaceBetween: 30, centeredSlides: true, pagination: '.swiper-pagination', paginationClickable: true, on: { slideChangeTransitionEnd: function () { // console.log(this.activeIndex) // 切换结束时,告诉我现在是第几个slide } } } } } ``` ``` watch: { 实现监听this.$refs.Myswper.swiper.activeIndex发生变化执行赋值动作 } ``` 由于vue不能监听到swiper中的activeIndex,也不能监听到ref的变动,请问如何才能实现想要的效果?
在中国程序员是青春饭吗?
今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...
【JSON解析】浅谈JSONObject的使用
简介 在程序开发过程中,在参数传递,函数返回值等方面,越来越多的使用JSON。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,同时也易于机器解析和生成、易于理解、阅读和撰写,而且Json采用完全独立于语言的文本格式,这使得Json成为理想的数据交换语言。 JSON建构于两种结构: “名称/值”对的集合(A Collection of name/va...
《MySQL 性能优化》之理解 MySQL 体系结构
本文介绍 MySQL 的体系结构,包括物理结构、逻辑结构以及插件式存储引擎。
程序员请照顾好自己,周末病魔差点一套带走我。
程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。
一名大专同学的四个问题
【前言】   收到一封来信,赶上各种事情拖了几日,利用今天要放下工作的时机,做个回复。   2020年到了,就以这一封信,作为开年标志吧。 【正文】   您好,我是一名现在有很多困惑的大二学生。有一些问题想要向您请教。   先说一下我的基本情况,高考失利,不想复读,来到广州一所大专读计算机应用技术专业。学校是偏艺术类的,计算机专业没有实验室更不用说工作室了。而且学校的学风也不好。但我很想在计算机领...
复习一周,京东+百度一面,不小心都拿了Offer
京东和百度一面都问了啥,面试官百般刁难,可惜我全会。
Java 14 都快来了,为什么还有这么多人固守Java 8?
从Java 9开始,Java版本的发布就让人眼花缭乱了。每隔6个月,都会冒出一个新版本出来,Java 10 , Java 11, Java 12, Java 13, 到2020年3月份,...
达摩院十大科技趋势发布:2020 非同小可!
【CSDN编者按】1月2日,阿里巴巴发布《达摩院2020十大科技趋势》,十大科技趋势分别是:人工智能从感知智能向认知智能演进;计算存储一体化突破AI算力瓶颈;工业互联网的超融合;机器间大规模协作成为可能;模块化降低芯片设计门槛;规模化生产级区块链应用将走入大众;量子计算进入攻坚期;新材料推动半导体器件革新;保护数据隐私的AI技术将加速落地;云成为IT技术创新的中心 。 新的画卷,正在徐徐展开。...
轻松搭建基于 SpringBoot + Vue 的 Web 商城应用
首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute): 函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传。函数计算准备计算资源,并以弹性伸缩的方式运行用户代码,而用户只需根据实际代码运行所消耗的资源进行付费。Fun: Fun 是一个用于支持 Serverless 应用部署的工具,能帮助您便捷地管理函数计算、API ...
讲真,这两个IDE插件,可以让你写出质量杠杠的代码
周末躺在床上看《拯救大兵瑞恩》 周末在闲逛的时候,发现了两个优秀的 IDE 插件,据说可以提高代码的质量,我就安装了一下,试了试以后发现,确实很不错,就推荐给大家。 01、Alibaba Java 代码规范插件 《阿里巴巴 Java 开发手册》,相信大家都不会感到陌生,其 IDEA 插件的下载次数据说达到了 80 万次,我今天又贡献了一次。嘿嘿。 该项目的插件地址: https://github....
Python+OpenCV实时图像处理
目录 1、导入库文件 2、设计GUI 3、调用摄像头 4、实时图像处理 4.1、阈值二值化 4.2、边缘检测 4.3、轮廓检测 4.4、高斯滤波 4.5、色彩转换 4.6、调节对比度 5、退出系统 初学OpenCV图像处理的小伙伴肯定对什么高斯函数、滤波处理、阈值二值化等特性非常头疼,这里给各位分享一个小项目,可通过摄像头实时动态查看各类图像处理的特点,也可对各位调参、测试...
2020年一线城市程序员工资大调查
人才需求 一线城市共发布岗位38115个,招聘120827人。 其中 beijing 22805 guangzhou 25081 shanghai 39614 shenzhen 33327 工资分布 2020年中国一线城市程序员的平均工资为16285元,工资中位数为14583元,其中95%的人的工资位于5000到20000元之间。 和往年数据比较: yea...
为什么猝死的都是程序员,基本上不见产品经理猝死呢?
相信大家时不时听到程序员猝死的消息,但是基本上听不到产品经理猝死的消息,这是为什么呢? 我们先百度搜一下:程序员猝死,出现将近700多万条搜索结果: 搜索一下:产品经理猝死,只有400万条的搜索结果,从搜索结果数量上来看,程序员猝死的搜索结果就比产品经理猝死的搜索结果高了一倍,而且从下图可以看到,首页里面的五条搜索结果,其实只有两条才是符合条件。 所以程序员猝死的概率真的比产品经理大,并不是错...
害怕面试被问HashMap?这一篇就搞定了!
声明:本文以jdk1.8为主! 搞定HashMap 作为一个Java从业者,面试的时候肯定会被问到过HashMap,因为对于HashMap来说,可以说是Java集合中的精髓了,如果你觉得自己对它掌握的还不够好,我想今天这篇文章会非常适合你,至少,看了今天这篇文章,以后不怕面试被问HashMap了 其实在我学习HashMap的过程中,我个人觉得HashMap还是挺复杂的,如果真的想把它搞得明明白...
毕业5年,我问遍了身边的大佬,总结了他们的学习方法
我问了身边10个大佬,总结了他们的学习方法,原来成功都是有迹可循的。
python爬取百部电影数据,我分析出了一个残酷的真相
2019年就这么匆匆过去了,就在前几天国家电影局发布了2019年中国电影市场数据,数据显示去年总票房为642.66亿元,同比增长5.4%;国产电影总票房411.75亿元,同比增长8.65%,市场占比 64.07%;城市院线观影人次17.27亿,同比增长0.64%。 看上去似乎是一片大好对不对?不过作为一名严谨求实的数据分析师,我从官方数据中看出了一点端倪:国产票房增幅都已经高达8.65%了,为什...
推荐10个堪称神器的学习网站
每天都会收到很多读者的私信,问我:“二哥,有什么推荐的学习网站吗?最近很浮躁,手头的一些网站都看烦了,想看看二哥这里有什么新鲜货。” 今天一早做了个恶梦,梦到被老板辞退了。虽然说在我们公司,只有我辞退老板的份,没有老板辞退我这一说,但是还是被吓得 4 点多都起来了。(主要是因为我掌握着公司所有的核心源码,哈哈哈) 既然 4 点多起来,就得好好利用起来。于是我就挑选了 10 个堪称神器的学习网站,推...
这些软件太强了,Windows必装!尤其程序员!
Windows可谓是大多数人的生产力工具,集娱乐办公于一体,虽然在程序员这个群体中都说苹果是信仰,但是大部分不都是从Windows过来的,而且现在依然有很多的程序员用Windows。 所以,今天我就把我私藏的Windows必装的软件分享给大家,如果有一个你没有用过甚至没有听过,那你就赚了????,这可都是提升你幸福感的高效率生产力工具哦! 走起!???? NO、1 ScreenToGif 屏幕,摄像头和白板...
阿里面试,面试官没想到一个ArrayList,我都能跟他扯半小时
我是真的没想到,面试官会这样问我ArrayList。
曾经优秀的人,怎么就突然不优秀了。
职场上有很多辛酸事,很多合伙人出局的故事,很多技术骨干被裁员的故事。说来模板都类似,曾经是名校毕业,曾经是优秀员工,曾经被领导表扬,曾经业绩突出,然而突然有一天,因为种种原因,被裁员了,...
大学四年因为知道了这32个网站,我成了别人眼中的大神!
依稀记得,毕业那天,我们导员发给我毕业证的时候对我说“你可是咱们系的风云人物啊”,哎呀,别提当时多开心啦????,嗯,我们导员是所有导员中最帅的一个,真的???? 不过,导员说的是实话,很多人都叫我大神的,为啥,因为我知道这32个网站啊,你说强不强????,这次是绝对的干货,看好啦,走起来! PS:每个网站都是学计算机混互联网必须知道的,真的牛杯,我就不过多介绍了,大家自行探索,觉得没用的,尽管留言吐槽吧???? 社...
良心推荐,我珍藏的一些Chrome插件
上次搬家的时候,发了一个朋友圈,附带的照片中不小心暴露了自己的 Chrome 浏览器插件之多,于是就有小伙伴评论说分享一下我觉得还不错的浏览器插件。 我下面就把我日常工作和学习中经常用到的一些 Chrome 浏览器插件分享给大家,随便一个都能提高你的“生活品质”和工作效率。 Markdown Here Markdown Here 可以让你更愉快的写邮件,由于支持 Markdown 直接转电子邮...
看完这篇HTTP,跟面试官扯皮就没问题了
我是一名程序员,我的主要编程语言是 Java,我更是一名 Web 开发人员,所以我必须要了解 HTTP,所以本篇文章就来带你从 HTTP 入门到进阶,看完让你有一种恍然大悟、醍醐灌顶的感觉。 最初在有网络之前,我们的电脑都是单机的,单机系统是孤立的,我还记得 05 年前那会儿家里有个电脑,想打电脑游戏还得两个人在一个电脑上玩儿,及其不方便。我就想为什么家里人不让上网,我的同学 xxx 家里有网,每...
史上最全的IDEA快捷键总结
现在Idea成了主流开发工具,这篇博客对其使用的快捷键做了总结,希望对大家的开发工作有所帮助。
阿里程序员写了一个新手都写不出的低级bug,被骂惨了。
这种新手都不会范的错,居然被一个工作好几年的小伙子写出来,差点被当场开除了。
谁是华为扫地僧?
是的,华为也有扫地僧!2020年2月11-12日,“养在深闺人不知”的华为2012实验室扫地僧们,将在华为开发者大会2020(Cloud)上,和大家见面。到时,你可以和扫地僧们,吃一个洋...
AI 没让人类失业,搞 AI 的人先失业了
最近和几个 AI 领域的大佬闲聊 根据他们讲的消息和段子 改编出下面这个故事 如有雷同 都是巧合 1. 老王创业失败,被限制高消费 “这里写我跑路的消息实在太夸张了。” 王葱葱哼笑一下,把消息分享给群里。 阿杰也看了消息,笑了笑。在座几位也都笑了。 王葱葱是个有名的人物,21岁那年以全额奖学金进入 KMU 攻读人工智能博士,累计发表论文 40 余篇,个人技术博客更是成为深度学习领域内风向标。 ...
2020年,冯唐49岁:我给20、30岁IT职场年轻人的建议
点击“技术领导力”关注∆每天早上8:30推送 作者|Mr.K 编辑| Emma 来源|技术领导力(ID:jishulingdaoli) 前天的推文《冯唐:职场人35岁以后,方法论比经验重要》,收到了不少读者的反馈,觉得挺受启发。其实,冯唐写了不少关于职场方面的文章,都挺不错的。可惜大家只记住了“春风十里不如你”、“如何避免成为油腻腻的中年人”等不那么正经的文章。 本文整理了冯...
作为一名大学生,如何在B站上快乐的学习?
B站是个宝,谁用谁知道???? 作为一名大学生,你必须掌握的一项能力就是自学能力,很多看起来很牛X的人,你可以了解下,人家私底下一定是花大量的时间自学的,你可能会说,我也想学习啊,可是嘞,该学习啥嘞,不怕告诉你,互联网时代,最不缺的就是学习资源,最宝贵的是啥? 你可能会说是时间,不,不是时间,而是你的注意力,懂了吧! 那么,你说学习资源多,我咋不知道,那今天我就告诉你一个你必须知道的学习的地方,人称...
立即提问