Vue control two-way binding problem
My demand is as follows: 1, enter a value in the input, the input control above display values change accordingly; 2, click on the "data" to implement changes and input control input control shows the value of the above, the following code only needs one, why can't implementation requirements 2? The couple give advice or comments please the great god!
<meta charset="utf-8" & gt;
Vue test instance - novice tutorial (runoob.com) & lt;/title> <br/><script SRC="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" & gt; </script> <br/></head> <br/><body> <br/><Div id="app" & gt; <br/><p> {{message}} & lt;/p> <br/><- the model input v="message" & gt; <br/><Input type="button" @ click="handleGetDevice" value="HTTP://https://bbs.csdn.net/topics/to get the data" & gt; <br/></div> <br/><br/><script> <br/>New Vue ({<br/>El: '# app, <br/>Data: {<br/>The message: 'Runoob! '<br/>}, <br/>Methods: {<br/>HandleGetDevice: function () {<br/>Message="Test"; <br/>} <br/>} <br/>}) <br/></script> <br/></body> <br/></html><p class="article - content rp"> CodePudding user response: </p>This. The message="Test"; </div>
<div class="th_page th_page_color"></div>
<div class="umCopyright">
<p>Page link：<a href="/frontend/37750.html" target="_blank" style="color:#999">https//www.codepudding.com/frontend/37750.html</a></p>
</div>
<div class="detail-arr">
<div class="detail-arr-left">Prev:<a href='/frontend/37749.html'>For help, the problem of Python</a></div>
<div class="detail-arr-right">Next:<a href='/frontend/37751.html'>Js code sliding to the page a fixed position</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="hot-tags neitags">
<ul>
<li><i class="iconfont icon-x-tags"></i> Tags： </li>
<a href='/e/tags/?tagname=JavaScript' target='_blank'>JavaScript</a> </ul>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="xiangguan">
<ul class="msg msghead">
<li class="tbname">Related</li>
</ul>
<ul> </ul>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="flinks">
<ul>
<li><i class="iconfont icon-x-tags"></i> Links： </li>
<li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span> <a href="https://www.codepudding.com/contact.html">Contact Us</a> <a href="https://www.codepudding.com/service.html">Terms of Service</a> <a href="https://www.codepudding.com/privacy.html">
Privacy Policy</a></p>
<p class="foot_info">Copyright © 2010-2023，Powered By <a href="/" target="_blank">CodePudding</a> </p>
</div>
<script type="text/javascript" src="/skin/code/tianhu.js"></script>
</body></html> 