vue实现的双向数据绑定操作示例

本文实例讲述了某视频剪辑软件实现的双向数据绑定操作。分享给大家供大家参考，具体如下：

！doctype html html head meta charset=' UTF-8 '标题经典的双向数据绑定/title脚本src=' http :https://cdn。bootcss。com/vue/2。0 .1/vue。量滴js '/script/head body div id=' container '按钮@ click=' modifyMsg '修改味精/按钮！-方向1:将定义好的数据绑定到试图实现方式：双花括号常见指令：v-for v-if v-show …… -！-方向2:将视图中用户操作的结果绑定到指定的数据（多数指表单控件输入/文本区域/选择)实现方式：v-model - p{{msg}}/p输入类型=' text ' v-model=' user address ' p { { '用户修改的数据：' UserAddress } }/p人力资源h2v-model.number/h2输入类型='text' v-model.number='n' br输入类型=' text ' v-model。number=' m ' br button @ click=' GetNum '求和/span按钮{ { num } }/span人力资源h2v-model.trim/h2 H5没有过滤首尾空格时：/h5输入类型=' text ' v-model=' MyInput ' span { { MyInput }。长度} }/跨度H5过滤首尾空格时：/h5输入类型=' text ' v-model。trim=' MyInput ' span { { MyInput }。长度} }/span h2v-moddel.lazy/h2H5输入失去焦点时才会输出myMsg/h5输入类型=“文本”v型。lazy=' MyMSg ' span { { MyMSg } }/span/div脚本new Vue({ El : ' # container }、data:{ msg:'Hello VueJs '、userAddress: ' '、n:0、m:0、myInput:0、myMsg:'' }、methods : } })/脚本/正文/html使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试，可得到如下运行效果

感兴趣的朋友可以测试一下看看运行效果。

希望本文所述对大家vue.js程序设计有所帮助。