修饰符v-model与.sync有什么区别？差异对比浅析-Vue.js-PHP中文网

修饰符v-model与.sync有什么区别？下面本篇文章给大家聊聊v-model与.sync修饰符的差异，希望对大家有所帮助！

修饰符v-model与.sync有什么区别？差异对比浅析

在日常开发的过程中，v-model指令是经常用到的，一般来说v-model指令在表单及元素上创建双向数据绑定，但v-model本质上是语法糖。提到语法糖这里就不得不提到另一个与v-model有相似功能的双向绑定语法糖了，那就是.sync修饰符。在这里对两者进行一下总结:

一、v-model

1. 作用

相信过使用过vue框架的朋友对这个指令不会感到陌生，v-model是用来进行、</code>、<code><select></code>元素上数据的双向绑定的。（学习视频分享：<a href="//m.sbmmt.com/course/list/18.html" target="_blank" textvalue="vue视频教程">vue视频教程</a>）</p><p> 例如：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false;"><template> <div > <input v-model="value" type="text"/> //这里的v-model里面的value可以直接获取到用户的输入值 </div> </template> <script> export default { components: {}, data() { return { value:"", //这里定义的value变量可以直接将上面获取到的值进行操作 }; }, } </script> <style scoped> </style></pre><div class="contentsignin">登录后复制</div></div><p>当我们在input框里输入了某个值的时候，下面data里的value就可以直接后去到我们输入的值，而不需要操作dom元素进行获取。</p><p><strong><em>1. 本质</em></strong></p><p>v-model本质上来说是一个语法糖，我们习惯性的写法是这样的：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> <input v-model="value" type="text"/></pre><div class="contentsignin">登录后复制</div></div><p>但是实际上完整的写法是这样的：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><input :value="value" @input="value=$event.target.value" type="text" /></pre><div class="contentsignin">登录后复制</div></div><p>通过对比语法糖和原始写法可以得出：再给<code><input/></code>元素添加v-model属性时，默认会把value作为元素的属性，然后把<code>input</code>事件作为实时传递value的触发事件。</p><p><strong>注意：不是所有能进行双向数据绑定的元素都是input事件！</strong></p><p><em><strong>3、特殊用法</strong></em></p><p>一般情况下，我们使用v-model主要是用于数据的双向绑定，可以十分方便的获取到用户输入的值，但在某些特殊情况下，我们也可以将v-model用于父子组件之间数据的双向绑定。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><template> <div class="father"> <Son v-model="str"/> </div> </template> <script> import Son from '@/components/Son.vue'; //引入子组件 export default { components: {Son}, data() { return { str:"father" }; }, } </script></pre><div class="contentsignin">登录后复制</div></div><p>这里定义了一个father组件和son组件，并且将son组件引入到father组件中，给son组件绑定了v-model进行了传值。此时我们需要在son组件中接收并使用这个值：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><template> <div class="son"> 我是在son组件里接收到的值:{{value}} </div> </template> <script> export default { components: {}, props:{ value:{ type:String, }, }, } </script></pre><div class="contentsignin">登录后复制</div></div><p><strong>注意：这里接受的值必须是value，写成其他名字将会报错！</strong></p><p>父组件向子组件传值，子组件中是不能直接修修改数据的，直接修改的话就会报错</p><p><img src="https://img.php.cn/upload/image/299/660/196/1657542915112034.png" title="1657542915112034.png" alt="1.png"/></p><p>当我们需要修改这个值时，就需要再将其传入到父组件中修改。</p><p><strong>这就需要在父组件中的子组件上定义一个自定义事件，通过子组件<code>$emit('自定义事件名称','值')</code>的方法将值传入父组件。</strong></p><p>但是在这里我们不能使用自定义事件，因为我们用的是v-model传值，所以我们只能使用input事件进行修改。</p><p>子组件中使用<code>$emit()</code>方法.调用父组件中的事件,并且进行传值</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><template> <div class="son"> 我是在son组件里接收到的值:{{value}} <button @click="handleClick">click</button> </div> </template> <script> export default { components: {}, data() { return { str:'son' }; }, props:{ value:{ type:String, }, }, methods: { handleClick(){ this.$emit('input',this.str) } }, } </script></pre><div class="contentsignin">登录后复制</div></div><p>这样就完成父子组件之间的数据双向绑定效果</p><h2><strong>二、.sync修饰符</strong></h2><p><em><strong>1、作用</strong></em></p><p>.sync修饰符可以实现父子组件之间的双向绑定，并且可以实现子组件同步修改父组件的值，相比较与<code>v-model</code>来说,<code>sync</code>修饰符就简单很多了:</p><p><em><strong>2、本质</strong></em></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> //正常父传子 <Son :a="num" /> //加上sync之后的父传子 <Son :a.sync="num" /> //它等价于 <Son :a="num" @update:a="val=>a=val" /> //相当于多了一个事件监听，事件名是update:a, //回调函数中，会把接收到的值赋值给属性绑定的数据项中。</pre><div class="contentsignin">登录后复制</div></div><p>这里面的传值与接收和正常的父组件向子组件传值没有区别，唯一的区别在于子组件往回传值的时候$emit所调用的事件名必须是<code>update:属性名</code>，事件名写错不会报错，但那时也不会有任何改变，这点需要注意。</p><h2><strong>总结</strong></h2><p>v-model与.sync：相同点：都是语法糖，都可以实现父子组件中的数据通信。</p><p>不同点：格式不同，v-model="num" :num.sync="num"</p><p>v-model:@input+value :num.sync:@update:num</p><p>还有就是，<code>v-model</code>只能使用一次，<code>.sync</code>可以使用多个。</p><p>【相关视频教程推荐：<a href="//m.sbmmt.com/course/list/18.html" target="_blank">vuejs入门教程</a>、<a href="//m.sbmmt.com/course/list/1.html" target="_blank" textvalue="web前端入门">web前端入门</a>】</p></body></html> <p>以上就是修饰符v-model与.sync有什么区别？差异对比浅析的详细内容，更多请关注php中文网其它相关文章！</p> </div> </div> <div class="ask_line-container" > <div class="ask_line"></div> <button type="button" class="ask_text test-iframe-handle"> 没有解决问题？点击使用智能助手 </button> <div class="ask_line"></div> </div> <div class="phpwzggBox" style="width: 1380px; margin: 20px auto;"> <script type="text/javascript" src="https://sw.php.cn/hezuo/43cc2463da342d2af2696436bd2d05f4.html" ></script> </div> <div style="height: 25px;"> <div class="wzconBq" style="display: inline-flex;"> <span>相关标签：</span> <div class="wzcbqd"> <a onclick="hits_log(2,'www',this);" href-data="/search?word=v-model" target="_blank">v-model</a> <a onclick="hits_log(2,'www',this);" href-data="/search?word=vue" target="_blank">Vue</a> <a onclick="hits_log(2,'www',this);" href-data="/search?word=vuejs" target="_blank">vue.js</a> </div> </div> <div style="display: inline-flex;float: right; color:#333333;">来源：掘金社区网</div> </div> <div class="wzconOtherwz"> <a href="//m.sbmmt.com/faq/493637.html"> <span>上一篇：Vue3.2中的expose是啥？有什么用？</span> </a> <a href="//m.sbmmt.com/faq/493839.html"> <span>下一篇：如何使用VueRouter4.x？快速上手指南</span> </a> </div> <div class="wzconShengming"> <img src="/static/images/images/benzhanshengming.png" /> <div>本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn</div> </div> <div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div> <div class="wzconZzwz"> <div class="wzconZzwztitle">作者最新文章</div> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/495900.html">支付通是什么平台</a> </div> <div>2023-09-12 14:49:39</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/495005.html">HMS Core是什么软件</a> </div> <div>2023-08-17 11:25:41</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/498804.html">Word文本框没有旋转按钮怎么办</a> </div> <div>2023-06-16 17:27:27</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/501067.html">linux如何查看版本信息</a> </div> <div>2023-05-25 12:44:11</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/501353.html">大数据平台是什么</a> </div> <div>2023-05-25 10:36:34</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/505018.html">mysql有for循环吗</a> </div> <div>2023-05-20 11:09:46</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/418961.html">参加php培训班有用吗</a> </div> <div>2023-05-18 07:24:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/417808.html">软件开发是选择自学还是培训？</a> </div> <div>2023-05-18 07:18:02</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/416171.html">it兄弟连培训怎么样？可靠吗？</a> </div> <div>2023-05-18 07:00:01</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/faq/415816.html">北风网培训真实情况怎么样？靠谱么？</a> </div> <div>2023-05-18 06:51:01</div> </li> </ul> </div> <div class="wzconZzwz"> <div class="wzconZzwztitle">最新问题</div> <div class="wdsyContent"> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/172957.html" target="_blank" title="Redux 状态无法正确访问后端 (mySQL) 数据" class="wdcdcTitle">Redux 状态无法正确访问后端 (mySQL) 数据</a> <a href="//m.sbmmt.com/wenda/172957.html" class="wdcdcCons">我在后端（mySQL）和前端之间渲染数据时遇到了问题。我已经在reduxdevtools和控制台日志中进行了调试，但仍然找不到原因。数据在控制台日志中正确获取，但当我记录我的状态时...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">P粉139351297来自于2023-09-20 10:40:44</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirdz flexRow"> <img src="/static/images/images/icon37.png" class="wdcdcirdzi">0</a> <a class="wdcdcirpl flexRow"><img src="/static/images/images/icon24.png" class="wdcdcirpli">1</a> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">124</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/172956.html" target="_blank" title="根据用户输入从数据集中筛选数据的问题" class="wdcdcTitle">根据用户输入从数据集中筛选数据的问题</a> <a href="//m.sbmmt.com/wenda/172956.html" class="wdcdcCons">以下是我迄今为止尝试过的概述：我有一个searchInput元素，用户可以在其中输入他们的搜索查询。当searchInput的值发生变化时，我使用一个函数来处理过滤过程。过滤函数循...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">P粉903969231来自于2023-09-20 09:37:52</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirdz flexRow"> <img src="/static/images/images/icon37.png" class="wdcdcirdzi">0</a> <a class="wdcdcirpl flexRow"><img src="/static/images/images/icon24.png" class="wdcdcirpli">1</a> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">262</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/172955.html" target="_blank" title="Axios GET 请求被前端中的某些内容修改" class="wdcdcTitle">Axios GET 请求被前端中的某些内容修改</a> <a href="//m.sbmmt.com/wenda/172955.html" class="wdcdcCons">在这个动作中，我在URL“api/media/action”上有一个基本的GET响应exportconstlistWorks=async(dispatch)=>{try{di...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">P粉195200437来自于2023-09-20 08:39:45</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirdz flexRow"> <img src="/static/images/images/icon37.png" class="wdcdcirdzi">0</a> <a class="wdcdcirpl flexRow"><img src="/static/images/images/icon24.png" class="wdcdcirpli">1</a> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">198</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/172954.html" target="_blank" title="如何正确使用计算器？" class="wdcdcTitle">如何正确使用计算器？</a> <a href="//m.sbmmt.com/wenda/172954.html" class="wdcdcCons">:root{--offset:30px;}.grid-cols-custom{/*使用自定义属性和calc()计算列宽*/grid-template-columns:calc((4...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">P粉046878197来自于2023-09-19 23:56:39</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirdz flexRow"> <img src="/static/images/images/icon37.png" class="wdcdcirdzi">0</a> <a class="wdcdcirpl flexRow"><img src="/static/images/images/icon24.png" class="wdcdcirpli">1</a> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">273</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/172953.html" target="_blank" title="这节课的意思是依赖注入等于脱了裤子放屁？" class="wdcdcTitle">这节课的意思是依赖注入等于脱了裤子放屁？</a> <a href="//m.sbmmt.com/wenda/172953.html" class="wdcdcCons">这节课的意思是依赖注入等于脱了裤子放屁？</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">小多来自于2023-09-20 22:24:24</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirdz flexRow"> <img src="/static/images/images/icon37.png" class="wdcdcirdzi">0</a> <a class="wdcdcirpl flexRow"><img src="/static/images/images/icon24.png" class="wdcdcirpli">0</a> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">44</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/172952.html" target="_blank" title="使用WebRTC和Javascript录制多个标签页" class="wdcdcTitle">使用WebRTC和Javascript录制多个标签页</a> <a href="//m.sbmmt.com/wenda/172952.html" class="wdcdcCons">我目前能够录制一个标签页，并从其流创建一个媒体录制器。我希望能够切换到另一个标签页并在另一个标签页上继续进行同样的录制，然后最后提供一个拼接好的视频。我该如何实现这个？</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">P粉571233520来自于2023-09-19 23:07:01</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirdz flexRow"> <img src="/static/images/images/icon37.png" class="wdcdcirdzi">0</a> <a class="wdcdcirpl flexRow"><img src="/static/images/images/icon24.png" class="wdcdcirpli">1</a> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">190</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/172951.html" target="_blank" title="重置“startButtonGame”的可见性是唯一的问题；其他一切都正常工作" class="wdcdcTitle">重置“startButtonGame”的可见性是唯一的问题；其他一切都正常工作</a> <a href="//m.sbmmt.com/wenda/172951.html" class="wdcdcCons">我正在开发一个21点游戏。到目前为止，除了这个小细节之外，一切都正常。基本上，开始游戏按钮只应在游戏之前和游戏之后可见。我没有问题，可以将其设置为隐藏，但是当我完成一局游戏时，它不...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">P粉614840363来自于2023-09-19 22:02:31</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirdz flexRow"> <img src="/static/images/images/icon37.png" class="wdcdcirdzi">0</a> <a class="wdcdcirpl flexRow"><img src="/static/images/images/icon24.png" class="wdcdcirpli">1</a> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">254</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/172950.html" target="_blank" title="作为主要部分使用的图片的最佳实践是什么？" class="wdcdcTitle">作为主要部分使用的图片的最佳实践是什么？</a> <a href="//m.sbmmt.com/wenda/172950.html" class="wdcdcCons">我有一个使用图片作为主要部分的部分。问题是图片对于手机、平板电脑和台式机来说太大了，有1MB。我担心图片太大了。我想知道在使用图片作为主要部分背景时的最佳实践。谢谢您的友善建议和意...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">P粉727416639来自于2023-09-19 20:54:07</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirdz flexRow"> <img src="/static/images/images/icon37.png" class="wdcdcirdzi">0</a> <a class="wdcdcirpl flexRow"><img src="/static/images/images/icon24.png" class="wdcdcirpli">1</a> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">212</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/172949.html" target="_blank" title="PHP：比较数组的数组并在值匹配时创建新数组" class="wdcdcTitle">PHP：比较数组的数组并在值匹配时创建新数组</a> <a href="//m.sbmmt.com/wenda/172949.html" class="wdcdcCons">这里是一个示例数据集$all_items=array($a1=array(name=>"item1",description=>"item...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">P粉323224129来自于2023-09-19 19:48:02</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirdz flexRow"> <img src="/static/images/images/icon37.png" class="wdcdcirdzi">0</a> <a class="wdcdcirpl flexRow"><img src="/static/images/images/icon24.png" class="wdcdcirpli">1</a> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">222</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> <div class="wdsyConDiv flexRow wdsyConDiv1"> <div class="wdcdContent flexColumn"> <a href="//m.sbmmt.com/wenda/172948.html" target="_blank" title="关闭：MySQL更新查询以增加特定值" class="wdcdcTitle">关闭：MySQL更新查询以增加特定值</a> <a href="//m.sbmmt.com/wenda/172948.html" class="wdcdcCons">如何使用相同的值增加更新mysql列Id名称更新A（期望）更新B（期望）1AAAAA112AAAAA123AAAAA134BBBBB215BBBBB226CCCCC317CCCCC...</a> <div class="wdcdcInfo flexRow"> <div class="wdcdcileft"> <span class="wdcdciSpan">P粉129275658来自于2023-09-19 18:36:24</span> </div> <div class="wdcdciright flexRow"> <a class="wdcdcirdz flexRow"> <img src="/static/images/images/icon37.png" class="wdcdcirdzi">0</a> <a class="wdcdcirpl flexRow"><img src="/static/images/images/icon24.png" class="wdcdcirpli">1</a> <a class="wdcdcirwatch flexRow"><img src="/static/images/images/icon43.png" class="wdcdcirwatchi">276</a> </div> </div> </div> </div> <div class="wdsyConLine wdsyConLine2"></div> </div> </div> <div class="wzconZt" > <div class="wzczt-title"> <div>相关专题</div> <a href="//m.sbmmt.com/faq/zt" target="_blank">更多> </a> </div> <div class="wzcttlist"> <ul> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/vuefzj"><img src="https://img.php.cn/upload/subject/202307/17/2023071716110465701.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/vuefzj" class="title-a-spanl"><span>vue父组件调用子组件的方法</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/vuevif"><img src="https://img.php.cn/upload/subject/202307/18/2023071809114952884.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/vuevif" class="title-a-spanl"><span>vue v-if</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/vueqb"><img src="https://img.php.cn/upload/subject/202307/17/2023071717023245690.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/vueqb" class="title-a-spanl"><span>vue2.0和3.0区别</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/vuezjcz"><img src="https://img.php.cn/upload/subject/202307/18/2023071809375473533.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/vuezjcz" class="title-a-spanl"><span>vue组件传值的方式</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/vueshedqb"><img src="https://img.php.cn/upload/subject/202307/25/2023072510184218094.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/vueshedqb" class="title-a-spanl"><span>vue3.0和2.0的区别</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/vuecyzl"><img src="https://img.php.cn/upload/subject/202308/02/2023080215424756724.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/vuecyzl" class="title-a-spanl"><span>vue常用指令</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/vuecyzlynx"><img src="https://img.php.cn/upload/subject/202308/15/2023081510294791489.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/vuecyzlynx" class="title-a-spanl"><span>vue中常用指令有哪些</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/faq/jquerycj"><img src="https://img.php.cn/upload/subject/202309/12/2023091209470250839.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" /> </a> <a target="_blank" href="//m.sbmmt.com/faq/jquerycj" class="title-a-spanl"><span>jquery插件有哪些</span> </a> </li> </ul> </div> </div> <div class="wzcongg"><script type="text/javascript" src="https://sw.php.cn/hezuo/7236a960e9805fe5337a40a36e76376b.html" ></script></div> </div> </div> <div class="phpwzright"> <div class="wzrOne" style="margin-bottom:31px; padding:0px; width: 366px;"> <script type="text/javascript" src="https://sw.php.cn/hezuo/7d4897500e1f8454c8cecc43e5d92949.html?yimen" ></script> </div> <div class="wzrOne"> <div class="wzroTitle">热门推荐</div> <div class="wzroList"> <ul> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" href="//m.sbmmt.com/faq/493451.html">什么是Vue CLI？聊聊vue cli的配置和使用</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" href="//m.sbmmt.com/faq/493545.html">Vue2和Vue3在响应式上有什么区别？简单对比</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" href="//m.sbmmt.com/faq/493557.html">vue2.0组件之间怎么传值？组件传输方式浅析</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" href="//m.sbmmt.com/faq/493558.html">29个Vue经典面试题（附源码级详解）</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" href="//m.sbmmt.com/faq/493599.html">【吐血整理】Vue.js面试题汇总及答案解析（快来收藏）</a> </div> </li> </ul> </div> </div> <div class="wzrTwo"> <script type="text/javascript" src="https://sw.php.cn/hezuo/3b9658c68b4a51ac91d4414a910efa45.html" ></script> </div> <div class="wzrTwo"> <script type="text/javascript" src="https://sw.php.cn/hezuo/08af4bd5aaa6c69c3f76add681d83973.html" ></script> </div> <div class="wzrThree"> <div class="wzrthree-title"> <div>热门教程</div> <a target="_blank" href="//m.sbmmt.com/k.html">更多> </a> </div> <div class="wzrthreelist"> <div class="wzrthreeTab"> <div class="check tabdiv" data-id="one">相关教程 <div></div></div> <div class="tabdiv" data-id="two">热门推荐<div></div></div> <div class="tabdiv" data-id="three">最新课程<div></div></div> </div> <ul class="one"> <li> <a target="_blank" href="//m.sbmmt.com/course/1324.html" title="Vue实战—打造属于自己的外卖系统" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/015/618376c1e8751382.jpg" alt="Vue实战—打造属于自己的外卖系统"/> </a> <div class="wzrthree-right"> <a target="_blank" href="//m.sbmmt.com/course/1324.html">Vue实战—打造属于自己的外卖系统</a> <div class="wzrthreerb"> <div >52446次学习</div> <a class="courseICollection" data-id="1324"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/1325.html" title="webpack+vue—从零开始打造前端项目" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6260f9b9d4650868.png" alt="webpack+vue—从零开始打造前端项目"/> </a> <div class="wzrthree-right"> <a target="_blank" href="//m.sbmmt.com/course/1325.html">webpack+vue—从零开始打造前端项目</a> <div class="wzrthreerb"> <div >30622次学习</div> <a class="courseICollection" data-id="1325"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/1340.html" title="Vue核心技术实战教程全套完整版" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/015/619b35b926ecb146.jpg" alt="Vue核心技术实战教程全套完整版"/> </a> <div class="wzrthree-right"> <a target="_blank" href="//m.sbmmt.com/course/1340.html">Vue核心技术实战教程全套完整版</a> <div class="wzrthreerb"> <div >45256次学习</div> <a class="courseICollection" data-id="1340"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/1359.html" title="VUE进阶—移动app端开发" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/61b9b6b272e78578.jpg" alt="VUE进阶—移动app端开发"/> </a> <div class="wzrthree-right"> <a target="_blank" href="//m.sbmmt.com/course/1359.html">VUE进阶—移动app端开发</a> <div class="wzrthreerb"> <div >32599次学习</div> <a class="courseICollection" data-id="1359"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/1412.html" title="TypeScript+Vue3.0实战教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/626a31ba63132631.jpg" alt="TypeScript+Vue3.0实战教程"/> </a> <div class="wzrthree-right"> <a target="_blank" href="//m.sbmmt.com/course/1412.html">TypeScript+Vue3.0实战教程</a> <div class="wzrthreerb"> <div >213231次学习</div> <a class="courseICollection" data-id="1412"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> </ul> <ul class="two" style="display: none;"> <li> <a target="_blank" href="//m.sbmmt.com/course/812.html" title="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)"/> </a> <div class="wzrthree-right"> <a target="_blank" href="//m.sbmmt.com/course/812.html">最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)</a> <div class="wzrthreerb"> <div >1329572次学习</div> <a class="courseICollection" data-id="812"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/379.html" title="独孤九贱(4)_PHP视频教程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" alt="独孤九贱(4)_PHP视频教程"/> </a> <div class="wzrthree-right"> <a target="_blank" href="//m.sbmmt.com/course/379.html">独孤九贱(4)_PHP视频教程</a> <div class="wzrthreerb"> <div >1160998次学习</div> <a class="courseICollection" data-id="379"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/801.html" title="PHP实战天龙八部之仿爱奇艺电影网站" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg" alt="PHP实战天龙八部之仿爱奇艺电影网站"/> </a> <div class="wzrthree-right"> <a target="_blank" href="//m.sbmmt.com/course/801.html">PHP实战天龙八部之仿爱奇艺电影网站</a> <div class="wzrthreerb"> <div >718272次学习</div> <a class="courseICollection" data-id="801"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/170.html" title="PHP入门视频教程之一周学会PHP" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253ddf274262146.png" alt="PHP入门视频教程之一周学会PHP"/> </a> <div class="wzrthree-right"> <a target="_blank" href="//m.sbmmt.com/course/170.html">PHP入门视频教程之一周学会PHP</a> <div class="wzrthreerb"> <div >1394058次学习</div> <a class="courseICollection" data-id="170"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/593.html" title="ThinkPHP5实战之[教学管理系统]" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/068/6253d87459486427.png" alt="ThinkPHP5实战之[教学管理系统]"/> </a> <div class="wzrthree-right"> <a target="_blank" href="//m.sbmmt.com/course/593.html">ThinkPHP5实战之[教学管理系统]</a> <div class="wzrthreerb"> <div >680992次学习</div> <a class="courseICollection" data-id="593"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> </ul> <ul class="three" style="display: none;"> <li> <a target="_blank" href="//m.sbmmt.com/course/1585.html" title="PHP，全球数千万Web开发者的共同选择" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/65011f0cec6a2558.png" alt="PHP，全球数千万Web开发者的共同选择"/> </a> <div class="wzrthree-right"> <a target="_blank" href="//m.sbmmt.com/course/1585.html">PHP，全球数千万Web开发者的共同选择</a> <div class="wzrthreerb"> <div >77次学习</div> <a class="courseICollection" data-id="1585"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/1581.html" title="18个Golang实战项目" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64b4b3441830c266.png" alt="18个Golang实战项目"/> </a> <div class="wzrthree-right"> <a target="_blank" href="//m.sbmmt.com/course/1581.html">18个Golang实战项目</a> <div class="wzrthreerb"> <div >1446次学习</div> <a class="courseICollection" data-id="1581"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/1580.html" title="Golang云原生架构师课程" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64af9b84659a5810.png" alt="Golang云原生架构师课程"/> </a> <div class="wzrthree-right"> <a target="_blank" href="//m.sbmmt.com/course/1580.html">Golang云原生架构师课程</a> <div class="wzrthreerb"> <div >3281次学习</div> <a class="courseICollection" data-id="1580"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/1577.html" title="Linux运维网站架构，知识点全面总结" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/64ab970dc6e8e558.png" alt="Linux运维网站架构，知识点全面总结"/> </a> <div class="wzrthree-right"> <a target="_blank" href="//m.sbmmt.com/course/1577.html">Linux运维网站架构，知识点全面总结</a> <div class="wzrthreerb"> <div >1393次学习</div> <a class="courseICollection" data-id="1577"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> <li> <a target="_blank" href="//m.sbmmt.com/course/1569.html" title="适合小白练手的38个Python爬虫实战项目" class="wzrthreelaimg"> <img src="https://img.php.cn/upload/course/000/000/067/649e4ff53d8ee137.png" alt="适合小白练手的38个Python爬虫实战项目"/> </a> <div class="wzrthree-right"> <a target="_blank" href="//m.sbmmt.com/course/1569.html">适合小白练手的38个Python爬虫实战项目</a> <div class="wzrthreerb"> <div >3131次学习</div> <a class="courseICollection" data-id="1569"><img src="/static/images/images/icon-small-nocollect.png" class="nofollow">收藏</a> </div> </div> </li> </ul> </div> <script> $('.wzrthreeTab>div').click(function(e){ $('.wzrthreeTab>div').removeClass('check') $(this).addClass('check') $('.wzrthreelist>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> <div class="wzrFour"> <div class="wzrfour-title"> <div>最新下载</div> <a href="//m.sbmmt.com/xiazai">更多> </a> </div> <div class="swiper-container sjyx_banSwiperwz"> <ul class="swiper-wrapper"> <li class="swiper-slide"> <a href="//m.sbmmt.com/xiazai/code/8146" target="_blank" title="私家侦探服务机构网站模板"> <img src="https://img.php.cn/upload/webcode/000/000/006/169517976082573.jpg?x-oss-process=image/resize,m_fill,h_220,w_335" onerror="this.onerror='';this.src='/static/images/moren/morentu.png'" alt="私家侦探服务机构网站模板"> </a> </li> <li class="swiper-slide"> <a href="//m.sbmmt.com/xiazai/code/8145" target="_blank" title="在线游戏俱乐部网站模板"> <img src="https://img.php.cn/upload/webcode/000/000/005/169517976088817.jpg?x-oss-process=image/resize,m_fill,h_220,w_335" onerror="this.onerror='';this.src='/static/images/moren/morentu.png'" alt="在线游戏俱乐部网站模板"> </a> </li> <li class="swiper-slide"> <a href="//m.sbmmt.com/xiazai/code/8144" target="_blank" title="候选人选票竞选活动网站模板"> <img src="https://img.php.cn/upload/webcode/000/000/013/169503139170662.jpg?x-oss-process=image/resize,m_fill,h_220,w_335" onerror="this.onerror='';this.src='/static/images/moren/morentu.png'" alt="候选人选票竞选活动网站模板"> </a> </li> <div class="clear"></div> </ul> <div class="swiper-pagination"></div> </div> <script> $(document).ready(function(){ var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{ speed:1000, autoplay:{ delay:3500, disableOnInteraction: false, }, pagination:{ el:'.sjyx_banSwiperwz .swiper-pagination', clickable :false, }, loop:true }) }) </script> <div class="wzrfourList"> <div class="wzrfourlTab"> <div class="check" data-id="onef">网站特效 <div></div></div> <div class="" data-id="twof">网站源码<div></div></div> <div class="" data-id="threef">网站素材<div></div></div> <div class="" data-id="fourf">前端模板<div></div></div> </div> <ul class="onef"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="js左侧分类菜单图片轮播代码" href="//m.sbmmt.com/xiazai/js/7863">[焦点幻灯] js左侧分类菜单图片轮播代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery百叶窗风格图片切换代码" href="//m.sbmmt.com/xiazai/js/7862">[焦点幻灯] jQuery百叶窗风格图片切换代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery仿京东首页广告图片切换" href="//m.sbmmt.com/xiazai/js/7861">[焦点幻灯] jQuery仿京东首页广告图片切换</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery无缝轮播插件" href="//m.sbmmt.com/xiazai/js/7860">[焦点幻灯] jQuery无缝轮播插件</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery自适应三屏滚动代码" href="//m.sbmmt.com/xiazai/js/7859">[焦点幻灯] jQuery自适应三屏滚动代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery仿今日头条图片轮播代码" href="//m.sbmmt.com/xiazai/js/7858">[焦点幻灯] jQuery仿今日头条图片轮播代码</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery爆炸切换效果焦点图" href="//m.sbmmt.com/xiazai/js/7857">[焦点幻灯] jQuery爆炸切换效果焦点图</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a target="_blank" title="jQuery仿魅族大图轮播幻灯片特效" href="//m.sbmmt.com/xiazai/js/7856">[焦点幻灯] jQuery仿魅族大图轮播幻灯片特效</a> </div> </li> </ul> <ul class="twof" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/7647" title="有机果蔬供应商网页模板 Bootstrap5" target="_blank">[Bootstrap模板] 有机果蔬供应商网页模板 Bootstrap5</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/7646" title="Bootstrap3多功能数据信息后台管理响应式网页模板-Novus" target="_blank">[后端模板] Bootstrap3多功能数据信息后台管理响应式网页模板-Novus</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/7645" title="房产资源服务平台网页模板 Bootstrap5" target="_blank">[Bootstrap模板] 房产资源服务平台网页模板 Bootstrap5</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/7644" title="简约简历资料网页模板 Bootstrap4" target="_blank">[Bootstrap模板] 简约简历资料网页模板 Bootstrap4</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/7639" title="bootstrap响应式宽屏图书教育网站模板-DREAMLIFE" target="_blank">[Bootstrap模板] bootstrap响应式宽屏图书教育网站模板-DREAMLIFE</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/7634" title="MAC风格响应式蓝色企业CMS后台管理系统模版" target="_blank">[后端模板] MAC风格响应式蓝色企业CMS后台管理系统模版</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/7632" title="响应式渐变大气后台管理系统网站模板-usinessbox" target="_blank">[后端模板] 响应式渐变大气后台管理系统网站模板-usinessbox</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/7629" title="响应式蔬菜水果商店网站模板-Organio" target="_blank">[Bootstrap模板] 响应式蔬菜水果商店网站模板-Organio</a> </div> </li> </ul> <ul class="threef" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3057" target="_blank" title="带着 VR 眼睛访问网络体验科技的人们矢量素材(EPS)">[网站素材] 带着 VR 眼睛访问网络体验科技的人们矢量素材(EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3056" target="_blank" title="空白背景的 iPhone 14 Pro+Pro Max 模型矢量素材(EPS)">[网站素材] 空白背景的 iPhone 14 Pro+Pro Max 模型矢量素材(EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3055" target="_blank" title="惬意的夏天海滩背景矢量素材(AI+EPS)">[网站素材] 惬意的夏天海滩背景矢量素材(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3054" target="_blank" title="连接万物的 IOT 物联网科技背景矢量素材(EPS)">[网站素材] 连接万物的 IOT 物联网科技背景矢量素材(EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3053" target="_blank" title="椰子树太阳海滩设计惬意夏天背景矢量素材(AI+EPS)">[网站素材] 椰子树太阳海滩设计惬意夏天背景矢量素材(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3052" target="_blank" title="椰子树沙滩和小岛设计夏天背景矢量素材(AI+EPS)">[网站素材] 椰子树沙滩和小岛设计夏天背景矢量素材(AI+EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3051" target="_blank" title="不断进化的机器人示意图矢量素材(EPS)">[网站素材] 不断进化的机器人示意图矢量素材(EPS)</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/sucai/3050" target="_blank" title="开心划龙舟的粽子设计端午节背景矢量素材(EPS)">[网站素材] 开心划龙舟的粽子设计端午节背景矢量素材(EPS)</a> </div> </li> </ul> <ul class="fourf" style="display:none"> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8146" target="_blank" title="私家侦探服务机构网站模板">[前端模板] 私家侦探服务机构网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8145" target="_blank" title="在线游戏俱乐部网站模板">[前端模板] 在线游戏俱乐部网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8144" target="_blank" title="候选人选票竞选活动网站模板">[前端模板] 候选人选票竞选活动网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8143" target="_blank" title="高级程序设计师简历网页模板">[前端模板] 高级程序设计师简历网页模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8142" target="_blank" title="太阳能电池板公司网站模板">[前端模板] 太阳能电池板公司网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8141" target="_blank" title="室内室外设计服务公司网站模板">[前端模板] 室内室外设计服务公司网站模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8140" target="_blank" title="极简浪漫风婚礼邀请网页引导页模板">[前端模板] 极简浪漫风婚礼邀请网页引导页模板</a> </div> </li> <li> <div class="wzrfourli"> <span class="layui-badge-dots wzrflr"></span> <a href="//m.sbmmt.com/xiazai/code/8139" target="_blank" title="商业脱口秀活动宣传网站模板">[前端模板] 商业脱口秀活动宣传网站模板</a> </div> </li> </ul> </div> <script> $('.wzrfourlTab>div').click(function(e){ $('.wzrfourlTab>div').removeClass('check') $(this).addClass('check') $('.wzrfourList>ul').css('display','none') $('.'+e.currentTarget.dataset.id).show() }) </script> </div> </div> </div>   <div class="phpFoot"> <div class="phpFootIn"> <div class="phpFootCont"> <div class="phpFootLeft"> <dl> <dt> <a href="//m.sbmmt.com/about/us.html" rel="nofollow" target="_blank" title="关于我们" class="cBlack">关于我们</a> <a href="//m.sbmmt.com/about/disclaimer.html" rel="nofollow" target="_blank" title="免责申明" class="cBlack">免责申明</a> <a href="javascript:;" rel="nofollow" onclick="advice_data(99999999,'意见反馈')" title="意见反馈" class="cBlack">意见反馈</a> <a href="//m.sbmmt.com/teacher.html" rel="nofollow" target="_blank" title="讲师合作" class="cBlack">讲师合作</a> <a href="//m.sbmmt.com/blog/detail/20304.html" rel="nofollow" target="_blank" title="广告合作" class="cBlack">广告合作</a>  <a href="//m.sbmmt.com/update/article_0_1.html" target="_blank" title="最新文章列表" class="cBlack">技术文章</a> <div class="clear"></div> </dt> <dd class="cont1">php中文网：公益在线php培训，帮助PHP学习者快速成长！</dd> <dd class="cont2"> <span class="ylwTopBox"> <a href="javascript:;" class="cBlack"><b class="icon1"></b>关注服务号</a> <em style="display:none;" class="ylwTopSub"> <p>微信扫码<br/>关注PHP中文网服务号</p> <img src="/static/images/examples/text16.png"/> </em> </span> <span class="ylwTopBox"> <a href="tencent://message/?uin=27220243&Site=m.sbmmt.com&Menu=yes" target="_blank" class="cBlack"><b class="icon2"></b>技术交流群</a> <em style="display:none;" class="ylwTopSub"> <p>QQ扫码<br/>加入技术交流群</p> <img src="/static/images/examples/text18.png"/> </em> </span> <div class="clear"></div> </dd> </dl> <div class="ylwTopBox phpAppBox" style="top: 0px; right: 20px;"> <div class="phpAppTitle"><a href="//m.sbmmt.com/app/" style="color:#cccccc;">app下载</a></div> <div class="phpAppSub ylwTopSub" style="display: none;"> <img src="//m.sbmmt.com/static/images/examples/text14.png"/> <p>扫描下载App</p> </div> </div> </div> <div class="phpFootRight"> <div class="phpFootMsg"> <span><img src="/static/images/examples/text17.png"/></span> <dl> <dt>PHP中文网订阅号</dt> <dd>每天精选资源文章推送</dd> </dl> </div> <div class="phpFootMsg"> <span><img src="/static/images/examples/text14.png"/></span> <dl> <dt>PHP中文网APP</dt> <dd>随时随地碎片化学习</dd> </dl> </div> <div class="phpFootMsg"> <span><img src="/static/images/dy.png"/></span> <dl> <dt>PHP中文网抖音号</dt> <dd>发现有趣的</dd> </dl> </div> </div> </div> </div> <div class="phpFootCode"> <div class="phpFootCodeIn"><p>Copyright 2014-2023 <a href="//m.sbmmt.com/" target="_blank">//m.sbmmt.com/</a> All Rights Reserved | 苏州跃动光标网络科技有限公司 | <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">苏ICP备2020058653号-1</a></p><a href="http://www.beian.gov.cn/portal/index.do" rel="nofollow" target="_blank"><b></b></a> <p> | 本站CDN由 <a href="https://www.wjdun.cn/" rel="nofollow" target="_blank" style="color:#787d82">数掘科技</a> 提供</p></div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://m.sbmmt.com/hm.js?c0e685c8743351838d2a7db1c49abd56"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <span class="layui-hide"><script type="text/javascript" src="https://s4.m.sbmmt.com/z_stat.php?id=1280886301&web_id=1280886301"></script></span>  <script> $(function() { //直播倒计时 $(".liveitem").each(function(){ timer(this); }) function timer(obj){ var intDiff = $(obj).data("countdown"); window.setInterval(function(){ var day=0, hour=0, minute=0, second=0;//时间默认值 if(intDiff > 0){ day = Math.floor(intDiff / (60 * 60 * 24)); hour = Math.floor(intDiff / (60 * 60)) - (day * 24); minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60); second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60); }else{ $(obj).find(".phpZbktBg").remove(); return; } if (hour <= 9) hour = '0' + hour; if (minute <= 9) minute = '0' + minute; if (second <= 9) second = '0' + second; $(obj).find('.day_show').html(day+""); $(obj).find('.hour_show').html('<s id="h"></s>'+hour+''); $(obj).find('.minute_show').html('<s></s>'+minute+''); $(obj).find('.second_show').html('<s></s>'+second+''); intDiff--; }, 1000); } }); </script> <script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js?1695264941"></script> <script>article_status = 287557;</script> <script type="text/javascript" src="/static/js/jquery.min.js"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <input type="hidden" id="verifycode" value="/captcha.html"> <script src="/static/js/jquery.min.js"></script> <script src="/static/layui/layui.js"></script> <script src="/static/js/common_new.js?2.1" ></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.33"></script> <script>var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//m.sbmmt.com/hm.js?c0e685c8743351838d2a7db1c49abd56";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();</script> <script type="text/javascript" src="/static/js/jquery.cookie.js"></script> <script>var topadshow = $.cookie('phpcndatatopadshows');if(!topadshow&&1==2){$('.topimages').show();var topobj = $('.topimages').find('.time');var topobj_day = $('.topimages .time').find('.day');var topobj_hours = $('.topimages .time').find('.hours');var topobj_minutes = $('.topimages .time').find('.minutes');var topobj_second = $('.topimages .time').find('.second');var topday = parseInt(topobj_day.html());var tophours = parseInt(topobj_hours.html());var topminutes = parseInt(topobj_minutes.html());var topsecond = parseInt(topobj_second.html());setInterval(function(){if(topsecond > 0){topsecond = topsecond-1;}else{if(topminutes > 0){topminutes = topminutes-1;topsecond = 59;}else{if(tophours > 0){tophours = tophours-1;topminutes = 59;topsecond = 59;}else{if(topday > 0){topday = topday -1;tophours = 23;topminutes = 59;topsecond = 59;}else{topobj.html("<p><span>活动已结束</span></p>");}}}}topobj_second.html(topsecond);topobj_minutes.html(topminutes);topobj_hours.html(tophours);topobj_day.html(topday);},1000);}$('.topimages .layui-icon-close').click(function(){$.cookie('phpcndatatopadshows',1,{expires:7});$('.topimages').hide();});</script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <style> .content img{max-width:80%;} .copy-button { padding: 5px 10px; background-color: #666; border: none; color: #FFF; font-size: 12px; cursor: pointer; border-radius: 5px; position: relative; top: 33px; right: 5px; z-index: 99; float: right; } .copy-button:hover { background-color: #fc3930; } </style> <script> $(document).ready(function(){ $('#gongzhonghao').hover(function(){ $('#gzh').show(); },function(){ $('#gzh').hide(); }) }) </script> <script> layui.use(['jquery','layer'], function(){ $('.test-iframe-handle').click(function(){ layer.open({ type: 2, area: ['1300px', '750px'], content: '//m.sbmmt.com/help/ask?q=%E4%BF%AE%E9%A5%B0%E7%AC%A6v-model%E4%B8%8E.sync%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F%E5%B7%AE%E5%BC%82%E5%AF%B9%E6%AF%94%E6%B5%85%E6%9E%90', fixed: true, // 不固定 //maxmin: true, shadeClose: true, title:"智能小助手", btnAlign: 'c', yes: function(index, layero){ // 获取 iframe 的窗口对象 var iframeWin = window[layero.find('iframe')[0]['name']]; var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素 var value = elemMark.val(); if($.trim(value) === '') return elemMark.focus(); // 显示获得的值 layer.msg('获得 iframe 中的输入框标记值：'+ value); } }); }) var is_login = "0"; var show = 0; var ceng = getCookie('ceng'); //文章下拉弹出登录 if(is_login == 0 && !ceng) { window.onscroll = function(){ var t = document.documentElement.scrollTop || document.body.scrollTop; var top_div = document.getElementById( "top_div" ); if( t >= 2500 && show == 0) { show = 1 setCookie('ceng',1,1); $(document).trigger("api.loginpopbox"); } } } //未登录复制显示登录按钮 if(is_login == 0) { $(".code").hover(function(){ $(this).find('.contentsignin').show(); },function(){ $(this).find('.contentsignin').hide(); }); //不给复制 $('.code').bind("cut copy paste",function(e) { e.preventDefault(); }); $('.code .contentsignin').click(function(){ $(document).trigger("api.loginpopbox"); }) }else { // 获取所有的 <pre> 元素 var preElements = document.querySelectorAll('pre'); // 遍历每个 <pre> 元素 preElements.forEach(function(preElement) { // 创建复制按钮 var copyButton = document.createElement('button'); copyButton.className = 'copy-button'; copyButton.textContent = '复制'; // 添加点击事件处理程序 copyButton.addEventListener('click', function() { // 获取当前按钮所属的 <pre> 元素中的文本内容 var textContent = preElement.textContent.trim(); // 创建一个临时 textarea 元素并设置其值为 <pre> 中的文本内容 var tempTextarea = document.createElement('textarea'); tempTextarea.value = textContent; // 将临时 textarea 添加到文档中 document.body.appendChild(tempTextarea); // 选中临时 textarea 中的文本内容并执行复制操作 tempTextarea.select(); document.execCommand('copy'); // 移除临时 textarea 元素 document.body.removeChild(tempTextarea); // 更新按钮文本为 "已复制" this.textContent = '已复制'; }); // 将按钮添加到 <pre> 元素前面 preElement.parentNode.insertBefore(copyButton, preElement); }); } }) function setCookie(name,value,iDay){ //name相当于键，value相当于值，iDay为要设置的过期时间（天） var oDate = new Date(); oDate.setDate(oDate.getDate() + iDay); document.cookie = name + '=' + value + ';path=/;domain=.php.cn;expires=' + oDate; } function getCookie(name) { var cookieArr = document.cookie.split(";"); for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); if(name == cookiePair[0].trim()) { return decodeURIComponent(cookiePair[1]); } } return null; } window.onload = function() { // 在这里引用需要延迟加载的 JavaScript 文件 var script = document.createElement('script'); script.src = 'https://cdn.wwads.cn/js/makemoney.js'; document.body.appendChild(script); }; </script>  <div class="phpFudong"> <div class="phpFudongIn"> <div class="phpFudongImg"></div> <div class="phpFudongXue">登录PHP中文网，和优秀的人一起学习！</div> <div class="phpFudongQuan">全站<span>2000+</span>教程免费学</div> <div class="phpFudongCode"><a href="javascript:;" id="login" title="微信扫码登录">微信扫码登录</a></div> <div class="phpGuanbi" onclick="$('.phpFudong').hide();"></div> <div class="clear"></div> </div> </div>   <style> .layui-fixbar{display: none;} </style> <div class="phpSdhBox"> <li> <div class="phpSdhIn"> <div class="phpSdhTitle"> <a href="//m.sbmmt.com/golang" target="_blank" class="hover" title="精品班"> <b class="icon1"></b> <p>精品班</p> </a> </div> </div> </li> <li> <div class="phpSdhIn"> <div class="phpSdhTitle"> <a href="//m.sbmmt.com/blog/detail/1047189.html" target="_blank"> <b class="icon2"></b> <p>立即咨询</p> </a> </div> </div> </li> <li> <div class="phpSdhIn ylwTopBox"> <div class="phpSdhTitle"> <a href="javascript:;"> <b class="icon3"></b> <p>微信沟通</p> </a> </div> <div class="phpSdhSub ylwTopSub" style="display: none;"> <img src="/static/images/examples/wechat1.png"/> </div> </div> </li> <li> <div class="phpSdhIn"> <div class="phpSdhTitle"> <a href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=viuU-z9Xo9LwNd89_8dLk8RImMY36iZM&authKey=qJ1YCc4xHY1QNXePak2HlTk14Eav31wM7auWA8SkjkEBUYg5cg0rXNw3YajrNfxL&noverify=0&group_code=730587727" target="_blank"> <b class="icon4"></b> <p>QQ群</p> </a> </div> </div> </li> <li> <div class="phpSdhIn"> <div class="phpSdhTitle"> <a href="//m.sbmmt.com/vip.html" class="hover" target="_blank"> <b class="icon5"></b> <p>优惠券</p> </a> </div> </div> </li> <li> <div class="phpSdhIn"> <div class="phpSdhTitle"> <a href="#"> <b class="icon6"></b> <p>返回顶部</p> </a> </div> </div> </li> </div>  <script src="https://sw.php.cn/hezuo/878d86723f149602730171fd9c17fe8b.html"></script> </body> </html>

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

修饰符v-model与.sync有什么区别？差异对比浅析

一、v-model