vue里面v-bind和Props 利用props绑定动态数据的方法


Posted in Javascript onAugust 27, 2018

如下所示:

<add v-bind:子组件的值="父组件的属性"></add>
<div id="app"> 
  <add v-bind:btn="h"></add> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      h: "hello" 
    }, 
    components: { 
      "add": { 
        props: ['btn'], 
        template: "<button>btn:{{btn}}</button>", 
        data: function () { 
          return {'btn': "123"}; //子组件同名的值被覆盖了 
        } 
      } 
    } 
  }); 
</script>

说明:

【1】btn使用的父组件data中 h的值;

【2】子组件的data的函数中返回值被覆盖了。

【3】也就是说,使用v-bind的是使用父组件的值(根据属性名),没有使用v-bind的是将标签里的数值当做字符串来使用。

【4】依然需要使用props,否则他会取用自己data里的btn的值

以上这篇vue里面v-bind和Props 利用props绑定动态数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
js 内存释放问题
Apr 25 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
jquery获取节点名称
Apr 26 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 #Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 #Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 #Javascript
vue监听input标签的value值方法
Aug 27 #Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 #Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 #Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 #Javascript
You might like
PHP下常用正则表达式整理
2010/10/26 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
详解php命令注入攻击
2019/04/06 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
Python-接口开发入门解析
2019/08/01 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
高三毕业典礼主持词
2014/03/27 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
医学生求职自荐书
2014/06/12 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript