VUE中v-model和v-for指令详解
程序员文章站
2022-09-02 11:22:31
1.基本雏形
</tit...</div>
<div class="content">
<p><strong>1.基本雏形</strong></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<!doctype html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new vue({
el:'#box',
data:{
msg:'hello vue!'
}
});
}
</script>
</head>
<body>
<div id="box">
{{msg}}
</div>
</body>
</html></pre>
</div>
<p>需要new一个vue实例，实例化的时候传入了一个对象{el:'#box',data:{msg:'hello vue!'}}。这个意思是：vue这个只控制id="box"这个div元素，同时在 html模板上使用双花括号{{xxxx}}语法，来访问data中定义的数据。</p>
<p>上面代码我们new处理一个vue的实例，并赋值给了vm变量，通过这个vm变量，我们也可以访问其中定义的数据：</p>
<div class="jb51code">
<pre class="brush:js;">
var vm = new vue({
el:'#box',
data:{
msg:'hello vue!'
}
});
console.log(vm.msg); //'hello vue!'
</pre>
</div>
<p><strong>2.v-model指令 </strong><br></p>
<p>所谓的“指令”其实就是扩展了html标签功能(属性)。 <br></p>
<p>v-model的双向数据绑定</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<!doctype html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new vue({
el:'#box',
data:{
msg:'hello vue!'
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="msg"/><br/>
{{msg}}
</div>
</body>
</html>
</pre>
</div>
<p>通过v-model 指令，我们把msg 数据绑定到了input文本框，我们修改文本框的值，发现msg 数据改变了。 <br></p>
<p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"title="VUE中v-model和v-for指令详解" alt="VUE中v-model和v-for指令详解" src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIxMi9iXzFfMjAxNzEyMTIxODMzMDMzNzE3LmpwZw=="></p>
<p>注意：如果我们定义的数据是数组或者json，在模板上会怎样显示出来呢？</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<!doctype html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new vue({
el:'#box',
data:{
msg:'hello vue!',
arr:['apple','banana','orange'],
json:{a:'apple',b:'banana'}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="msg"/><br/>
{{msg}} <br/>
{{arr}} <br/>
{{json}}
</div>
</body>
</html>
</pre>
</div>
<p>数组和json都被当作字符串输出了，显然这不是我们理想的效果。</p>
<p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"title="VUE中v-model和v-for指令详解" alt="VUE中v-model和v-for指令详解" src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIxMi9iXzFfMjAxNzEyMTIxODMzMDQ1Nzg3LmpwZw=="> </p>
<p><strong>3.v-for指令</strong></p>
<div class="jb51code">
<pre class="brush:xhtml;">
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
window.onload = function(){
var vm = new vue({
el:'#box',
data:{
arr:['apple','banana','orange'],
json:{a:'apple',b:'banana'}
}
});
}
</script>
</head>
<body>
<div id="box">
<p>循环数组</p>
<ul>
<li v-for="a in arr">
{{a}}
</li>
</ul>
<hr>
<p>循环出数组索引</p>
<ul>
<li v-for="(v,k) in arr">
{{v}}==>{{k}}
</ul>
<p>循环json</p>
<ul>
<li v-for="item in json">{{item}}</li>
</ul>
<p>循环json的键</p>
<ul>
<li v-for="(k,v) in json">
{{k}}==>{{v}}
</li>
</ul>
</div>
</body>
</html>
</pre>
</div>
<p style="text-align: center"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"title="VUE中v-model和v-for指令详解" alt="VUE中v-model和v-for指令详解" src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIxMi9iXzFfMjAxNzEyMTIxODMzMDQyMDg3LmpwZw=="></p>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1827420.html">
PHP排序算法系列之插入排序详解 </a>
</p>
<p>
下一篇： <a href="/article/1827422.html">
Win8临时文件夹如何修改路径? </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/2039528.html" target="_blank" title="详解Vue中数组和对象更改后视图不刷新的问题">
<h2>
详解Vue中数组和对象更改后视图不刷新的问题 </h2>
</a>
</li>
<li>
<a href="/article/2039519.html" target="_blank" title="Vue.js 中的 v-model 指令及绑定表单元素的方法">
<h2>
Vue.js 中的 v-model 指令及绑定表单元素的方法 </h2>
</a>
</li>
<li>
<a href="/article/2012184.html" target="_blank" title="Vue.js 源码分析(二十二) 指令篇 v-model指令详解">
<h2>
Vue.js 源码分析(二十二) 指令篇 v-model指令详解 </h2>
</a>
</li>
<li>
<a href="/article/1986727.html" target="_blank" title="详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on">
<h2>
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on </h2>
</a>
</li>
<li>
<a href="/article/1967009.html" target="_blank" title="浅析Vue.js中v-bind v-model的使用和区别">
<h2>
浅析Vue.js中v-bind v-model的使用和区别 </h2>
</a>
</li>
<li>
<a href="/article/1923937.html" target="_blank" title="详解angularjs中如何实现控制器和指令之间交互">
<h2>
详解angularjs中如何实现控制器和指令之间交互 </h2>
</a>
</li>
<li>
<a href="/article/1923061.html" target="_blank" title="Vue学习之路第十四篇：v-for指令中key的使用注意事项">
<h2>
Vue学习之路第十四篇：v-for指令中key的使用注意事项 </h2>
</a>
</li>
<li>
<a href="/article/1915910.html" target="_blank" title="this在vue和小程序中的使用详解">
<h2>
this在vue和小程序中的使用详解 </h2>
</a>
</li>
<li>
<a href="/article/1897734.html" target="_blank" title="详解Vue中localstorage和sessionstorage的使用">
<h2>
详解Vue中localstorage和sessionstorage的使用 </h2>
</a>
</li>
<li>
<a href="/article/1890521.html" target="_blank" title="Vue.js中 v-model 指令的修饰符详解">
<h2>
Vue.js中 v-model 指令的修饰符详解 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>