搜索到
3
篇与
vue
的结果
-
Vue实现点击列勾选或取消前面的复选框 示例说明<table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>手机号</th> </tr> </thead> <tbody> <tr v-for="c in tableData"> <td><input :id="c.id" v-model="checkItemIds" type="checkbox" :value="c.id"></td> <td><label :for="c.id">{{c.name}}</label></td> <td><label :for="c.id">{{c.age}}</label></td> <td><label :for="c.id">{{c.phone}}</label></td> </tr> </tbody> </table> <script> Vue app = new Vue({ /** ...省略具体Vue属性和方法函数； 渐进式Vue方案 */ }) </script>实现原理1、在<input>标签中使用id属性绑定c.id2、使用<label>标签:for="c.id"双向绑定id值，包裹插值属性值双向绑定在复选框选中多个数据项后，id值会以数组的形式存进checkItemIds数组中 -
【VUE】process.env详解 process 是个全局变量使用的时候可以直接使用process.env 是 Node.js 中的一个环境对象。其中保存着系统的环境的变量信息。可使用 Node.js 命令行工具直接进行查看。模式的应用有了模式的概念，就可以根据不同的环境配置模式，就不用每次打包时都去更改 vue.config.js 文件了。比如在测试环境和生产环境， publicPath参数 （部署应用包时的基本 URL） 可能不同。遇到这种情况就可以在 vue.config.js 文件中，将 publicPath 参数设置为：publicPath: process.env.BASE_URL设置之后，再在各个 .env.[mode] 文件下对 BASE_URL 进行配置就行了，这样就避免了每次修改配置文件的尴尬。其他的配置也是同理。Tips: 即使不是生产环境，也可以将模式设置为 production ，这样可以获得 webpack 默认的打包优化。————————————————版权声明：本文为CSDN博主「Lucky@Dong」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/zzddada/article/details/122556869也就是说 只有是VUE_APP开头的才会被识别，其他的都不行
-
vue子组件向父级(组件)传递数据 组件通信 子组件向父组件通信 案例：点击组件按钮，改变父级数据的值 父级数值为：{{num}} 引入子组件 总结：子组件与父组件去通信(传递数据)，本质是子组件的方法绑定父组件的方法，通过方法传递参数到父组件的方法，方法返回的对象然后再传递给子组件 //定义组件 const operation = { template:` + - `, props:["num"], methods:{ //组件方法，去调用父方法实现数据通信 incrNum(){ return this.$emit("plus"); }, decrNum(){ return this.$emit("reduce"); } } }; var app = new Vue({ el:"#app", data:{ num:0 }, //注册组件时：组件的定义要在上面，否则会报错：找不到组件 components:{ operation:operation }, methods:{ numPlus(){ this.num++; }, numReduce(){ this.num--; } } }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件通信</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="app"> <h2>子组件向父组件通信</h2> <b>案例：</b>点击组件按钮，改变父级数据的值 <h2>父级数值为：{{num}}</h2> <hr> <b>引入子组件</b> <!--在实例中引入方法--> <operation @plus="numPlus" @reduce="numReduce" :num="num"></operation> <hr> <p>总结：子组件与父组件去通信(传递数据)，本质是子组件的方法绑定父组件的方法，通过方法传递参数到父组件的方法，方法返回的对象然后再传递给子组件</p> <hr> </div> <script type="text/javascript"> //定义组件 const operation = { template:` <div> <!--vue模板中不允许同时出现两个根元素--> <button @click="incrNum">+</button> <button @click="decrNum">-</button> </div> `, props:["num"], methods:{ //组件方法，去调用父方法实现数据通信 incrNum(){ return this.$emit("plus"); }, decrNum(){ return this.$emit("reduce"); } } }; var app = new Vue({ el:"#app", data:{ num:0 }, //注册组件时：组件的定义要在上面，否则会报错：找不到组件 components:{ operation:operation }, methods:{ numPlus(){ this.num++; }, numReduce(){ this.num--; } } }); </script> </body> </html>
