详解Vue.js之视图和数据的双向绑定㈤型)

1、使用v型指令，使得视图和数据实现双向绑定v型主要用在表单的投入输入框，完成视图和数据的双向绑定。

2、JavaScript代码

脚本类型=' text/JavaScript ' src=' http :/js/Vue-1。0 .21 .js/脚本脚本类型=' text/JavaScript '窗口。onload=function(){ VM=new Vue({ El : ' # app '，data : { message : ' Hello World '，} })；}/脚本3、Html的页面代码

div id='app' class='container '输入类型='text' v-model='message'/输入类型=' text ' v型=' message '/br/{ { message } }/div 4，完整的代码

！DOCTYPE html html head meta charset=' UTF-8 ' title/title link rel='样式表href='./CSS/bootstrap。量滴CSS ' rel='外部无跟随'/样式类型=' text/CSS ' .容器{ margin-top : 20px；}/样式脚本类型=' text/JavaScript ' src=' http :/js/vue-1。0 .21 .js/脚本脚本类型=' text/JavaScript ' src=' http :/js/jquery。量滴js/'脚本脚本类型='text/javascript' $().ready(function(){ var VM=new Vue({ El : ' # app '，data : { message : ' Hello World！'} });});/script/head body div id=' app ' class=' container '输入类型='text' v-model='message'/输入类型=' text ' v-model=' message '/br/{ { message } }/div/body/html 5，效果演示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。