将此标记用于特定于Vue.js版本2的问题，这是一个用于构建用户界面的开源，渐进式Javascript框架。
我是 vue.js 的新手。我写了这段代码： 我是 vue.js 新手。我写了这段代码： <li class="list-inline-item me-3"> <h5 class="font-size-14" data-toggle="tooltip" data-placement="top" title="From" > <label>Start time</label> <br /> <i class="bx bx-time me-1 text-muted"> <b-form-input class="no-border" :value="object.start_time.slice(0,5)" :disabled="!object.can_change" @input="object.start_time = $event" format="HH:mm" value-type="format" type="time" placeholder="HH:mm"></b-form-input> </i></h5> </li> 此代码显示时间（小时和分钟）。问题是，上午和下午的时间是 12 小时，但我想要 24 小时。我怎样才能做到这一点？ 这个和vue.js无关。你可以试试day.js。你可以使用day.js的格式来转换24小时。
如何使用vue js从带有服务器端行模型（数据源）的ag-grid获取总行数？
我正在使用ag-grid和vue，以及服务器端行模型。 我想显示所有行的计数，不仅是显示的行，而且实际上是数据库中所有行的计数。这个
目前我正在开发一个功能，其中突变 updateConversationBasedOnAssignedUser 更新状态 current_action。 updateConversationBasedOnAssignedUser 使用 Ax 进行异步/等待调用...
我在这里可以实现的这个弹出窗口的最大宽度是250px。 现在，我想将按钮拉伸到整个弹出窗口的宽度。 下面是我尝试过的一段代码- 我在这里可以实现的弹出窗口的最大宽度是 250px。 现在，我想将按钮拉伸到整个弹出窗口的宽度。 下面是我尝试过的一段代码- <div slot="actions" style="width: 250px; text-align: left;"> <button @click="signup()" class="btn btn-primary btn-next" style="width: 250px;">Sign up</button> </div> 我的期望- 如果您使用引导程序，请尝试使用“btn-block”类 <div slot="actions" style="width: 250px; text-align: left;"> <button @click="signup()" class="btn btn-primary btn-next btn-block" style="width: 250px;">Sign up</button> </div>
通过 JS/某些插件更新值时 vue js v-model 中的反应性
我目前在理解 VueJS 的 v-model 反应性如何工作方面遇到一些困难。 我有一个选择插件，可以帮助我设置选择字段的样式，但它通过 cou 的 JS 更改选择字段值...
我想访问另一个 props 验证器中的 props 值： 道具： { 类型： { 类型：字符串， 默认值：“标准” }, 尺寸： { 类型：字符串， 默认值：“正常”， 验证器（值...
我如何访问作为另一个 $refs 的子级的 $refs？ 就像我的代码看起来像这样，我想要的是能够使用与我尝试过的语法类似的语法访问引用“ipsum”。的c...
如何在 vue 组件中使用 refs（最好是在循环中）来操作模板中的多个 dom 元素？举例来说，我想在每个 上应用带有 GSAP 的动画 如何在我的 vue 组件中（最好是在循环中）使用 refs 来操作模板中的多个 dom 元素？举例来说，我想在函数中的每个 <p ref="pre"> 上应用带有 GSAP 的动画。我该怎么做？就像我会以数组或其他方式访问它们吗？当前代码仅适用于第一个元素，对吗？ 我的模板 <template> <section ref="sectionText"> <p ref="pre"> text </p> </section> <section ref="sectionImage"> <p ref="pre"> some more text </p> </section> <section ref="sectionAudio"> <p ref="pre"> even more </p> </section> <section ref="sectionVideo"> <p ref="pre"> text </p> </section> </template> 我的组件 <script> import gsap from 'gsap' export default { mounted() { gsap.to(this.$refs.pre, 0.75, { opacity: 0 }) } } </script> 这种方法确保您可以在循环中使用 refs 将动画应用到多个 DOM 元素。 <template> <section ref="sectionText"> <p ref="setRef"> text </p> </section> <section ref="sectionImage"> <p ref="setRef"> some more text </p> </section> <section ref="sectionAudio"> <p ref="setRef"> even more </p> </section> <section ref="sectionVideo"> <p ref="setRef"> text </p> </section> </template> <script> import { gsap } from 'gsap'; export default { data() { return { preRefs: [] }; }, methods: { setRef(el) { if (el) { this.preRefs.push(el); } } }, mounted() { this.preRefs.forEach((pre) => { gsap.to(pre, 0.75, { opacity: 0 }); }); } } </script>
我有一个组件作为 DOM 渲染的一部分安装。该应用程序的骨架是 我有一个作为 DOM 渲染的一部分安装的组件。该应用程序的骨架是 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <div id="app"> <my-component></my-component> <button>press this button to reload the component</button> </div> </body> </html> <my-component> 具有功能（它显示一些表单输入）并且 $emit 向父级提供数据。 有办法重新安装它吗？目标是拥有组件内容和设置，就好像它刚刚第一次渲染一样（包括重置保持其状态的data()元素）。 对此有一些解决方案，但它们都假设重写data()，我想避免这种情况。 我的理解是，组件实际上是在渲染过程中在正确位置注入 dom 中的 HTML/CSS/JS 代码，所以我担心“重新安装”它的概念不存在 - 我只是想在之前确定一下采用 data() 重写方式。 诀窍是改变密钥 当 key 发生变化时，vue 会将其视为新组件，因此会卸载“旧”组件，并挂载“新”组件。 参见示例，created()挂钩只会运行一次，因此如果您看到值发生变化，您就会看到一个全新的对象。 示例： Vue.component('my-component', { template: `<div>{{ rand }}</div>`, data() { return { remount: true } }, created() { this.remount = !this.remount; // true▶false▶true▶false... } }); new Vue({ el: '#app', data: { componentKey:0 } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script> <div id="app"> <my-component :key="componentKey"></my-component> <button @click="componentKey=!componentKey">press this button to reload the component</button> </div> 在模板中，您将添加 v-if 指令： <template> <my-component v-if="renderComponent" /> </template> 在您的脚本中，您将添加使用 nextTick: 的方法 <script> export default { data() { return { renderComponent: true, }; }, methods: { forceRerender() { // Remove my-component from the DOM this.renderComponent = false; this.$nextTick(() => { // Add the component back in this.renderComponent = true; }); } } }; </script> 这就是这里发生的事情： 最初 renderComponent 设置为 true，因此渲染 my-component 当我们调用 forceRerender 时，我们立即将 renderComponent 设置为 false 我们停止渲染 my-component，因为 v-if 指令现在计算为 false 在下一个刻度上 renderComponent 设置回 true 现在 v-if 指令的计算结果为 true，因此我们再次开始渲染 my-component 可能来源：https://medium.com/hackernoon/the- Correct-way-to-force-vue-to-re-render-a-component-bde2caae34ad，最初发布于https://michaelnthiessen。 com/force-re-render/ .
我一直在尝试将数据从 Rails 视图传递到 Vue 组件，如此处所述 一切都按预期进行，但我对如何访问通过
Vuex 和 Vue Router - beforeEnter 上的双重条件不起作用
我在 beforeEnter 中有双重条件，没有人可以进入正确的位置。有条件限制什么的吗？ :( 我在路由器文件中的代码： 常量路由 = { 路径：`${routerConfig.preRoute}/
Jest 和 Vue 测试 Computed 中的 UseHead
尝试在计算内部的组件中测试 UseHead，但它抛出以下错误无法读取未定义的属性（读取“名称”） Vue 组件有 useHead(计算(() ...
Chrome Core 在 IOS 浏览器中出现长按 UI 错误
我从另一个H5页面使用iframe打开一个H5页面，当我使用IOS Edge或IOS Chrome并在任何地方长按页面时，页面内容将被重置（我使用vue.js构建页面）。就像数据重置一样当长
出于一个非常利基和特定的原因，我需要 VueJS 的两个主要版本（2 和 3）在同一个网页上同时运行，并且每个版本彼此独立地运行自己的插件。这一切都会
我昨天才开始使用 vue.js 编码，我不知道如何在不使用“传统”JS 方式 document.getElementById('myTextBox').focus() 的情况下“聚焦”文本框。 最初，我的
http://localhost:8000/broadcasting/auth 404（未找到）
我正在尝试让我的应用程序连接到私人频道上的推送器。 但我收到以下错误： Pusher.js?b3eb:593 POST http://localhost:8000/broadcasting/auth 404 （未找到） ...
Vue 2 + Axios - 显示/隐藏 div 作为 Axois 请求结果的结果
我的 html 页面中有一个 div ... isCaptchaError - 在我的 Vue 实例中初始化： const 形式 = 新 Vue({ 电子...
pnpm patch 成功给项目打补丁，但是项目运行时补丁不生效？
我发现el-form有问题，所以我决定在我的项目中修补element-ui。 [email protected]、[email protected]、pnpm、element-ui@^2.15.14 我运行了 pnpm patch element-ui@^2.15.14 根目录补丁...
我想在浏览器中使用 VueNumberFormat （vue 2 库）。 我在 html 页面中加载库 <question vote="0"> <p>我想在浏览器中使用 VueNumberFormat （vue 2 库）。</p> <p>我在我的 html 页面中加载库</p> <pre><code><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="285e5d4d05465d454a4d5a054e475a45495c6819061b0619">[email protected]</a>/dist/library.js"></script> </code></pre> <p>接下来在我的 js 文件中我尝试使用这个库</p> <pre><code>Vue.use(VueNumberFormat, {prefix: 'R$ ', decimal: ',', thousand: '.'}); </code></pre> <p>页面加载后，我在浏览控制台中出现错误</p> <pre><code>library.js:3 Uncaught ReferenceError: require is not defined at library.js:3:11 </code></pre> <p>有什么方法可以在浏览器环境中使用这个或另一个库吗？</p> </question> <answer tick="false" vote="0"> <p>您正在使用的 cdn 链接使用 <pre><code>require</code></pre>，因此使其正常工作可能会很棘手。</p> <p>cdn 包含一个 esm 模块，您可以像这样使用</p> <pre><code><script type="module"> import vueNumberFormat from 'https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" data-cfemail="6b1d1e0e46051e06090e19460d0419060a1f2b5a4558455a">[email protected]</a>/+esm' </script> </code></pre> <p>但是如果您不熟悉使用 esm 模块，这可能会令人困惑。</p> <p>或者，github存储库包含可以直接使用的umd文件<a href="https://github.com/igortrinidad/vue-number-format/blob/d5345761b21475d489e31ef94411f8dfd0363b13/dist/VueNumberFormat.umd.min.js" rel="nofollow noreferrer">https://github.com/igortrinidad/vue-number-format/blob/d5345761b21475d489e31ef94411f8dfd0363b13/dist/VueNumberFormat.umd.min.js</a> 我找不到为此的 CDN，因此您必须下载此文件并自行托管它或为此找到一些 CDN，或者作为最后的手段将内容包含在脚本标记中</p> <pre><code><script> (function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["VueNumberFormat"]=t(require("vue")):e["VueNumberFormat"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s="fb15")}({"025e":function(e,t,n){"use strict";n.d(t,"a",(function(){return o})),n.d(t,"d",(function(){return u})),n.d(t,"b",(function(){return i})),n.d(t,"c",(function(){return a}));var r=n("ffd9");const o=(e=0,t=r["a"])=>{null===e&&(e=0);const n=Object.assign({},r["a"],t);"number"!==typeof e||n.isInteger||(e=e.toFixed(s(n.precision)));const o=m(e,n.acceptNegative)?"-":"",u=c(e),i=f(u,n.precision),a=d(i).split(".");var b=a[0];const v=a[1];return b=p(b,n.thousand),o+n.prefix+l(b,v,n.decimal)+n.suffix},u=(e=0,t={precision:2,isInteger:!1,acceptNegative:!0})=>{null===e&&(e=0);const n=Object.assign({},r["a"],t);var o=m(e,n.acceptNegative)?-1:1,u=c(e),i=f(u,n.precision);return n.isInteger?parseInt(`${m(e,n.acceptNegative)?"-":""}${u.toString()}`):parseFloat(i)*o},i=(e,t)=>{var n=function(){e.setSelectionRange(t,t)};e===document.activeElement&&setTimeout(n,1)},a=(e,t=r["a"])=>{var n=e.value.length-e.selectionEnd;e.value=o(e.value,t),n=Math.max(n,t.suffix.length),n=e.value.length-n,n=Math.max(n,t.prefix.length+1),i(e,n)};function c(e){return d(e).replace(/\D+/g,"")||"0"}function s(e){return Math.max(0,Math.min(e,20))}function f(e,t){var n=Math.pow(10,t),r=parseFloat(e)/n;return r.toFixed(s(t))}function p(e,t){return e.replace(/(\d)(?=(?:\d{3})+\b)/gm,"$1"+t)}function l(e,t,n){return t?e+n+t:e}function d(e){return e?e.toString():""}function m(e,t=!0){if(!t)return!1;"string"!=typeof e&&(e=e.toString());const n=e.indexOf("+")>=0,r=0!==e&&e.indexOf("-")>=0||"-"==e[e.length-1];return!(n||!r)}},"6b0d":function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=(e,t)=>{const n=e.__vccOpts||e;for(const[r,o]of t)n[r]=o;return n}},"7fb5":function(e,t,n){"use strict";var r=n("8bbf");const o=["value"];function u(e,t,n,u,i,a){return Object(r["openBlock"])(),Object(r["createElementBlock"])("input",{value:a.formattedValue,inputmode:"numeric",onInput:t[0]||(t[0]=e=>a.onInput(e)),onFocus:t[1]||(t[1]=e=>a.onFocus(e))},null,40,o)}var i=n("025e"),a=n("ffd9"),c={name:"VueNumberFormat",props:{value:{type:[String,Number],default:null},options:{type:Object,default:()=>{}}},emits:["input","update:value"],computed:{mergedOptions(){const e=this.$vueNumberFormatOptions||a["a"];return this.options?Object.assign({},e,this.options):e},formattedValue(){return Object(i["a"])(this.value,this.mergedOptions)}},created(){this.$vueNumberFormatOptions||(this.$vueNumberFormatOptions=a["a"])},methods:{onFocus(e){Object(i["b"])(e.target,e.target.value.length-this.mergedOptions.suffix.length)},onInput(e){Object(i["c"])(e.target,this.mergedOptions);const t=Object(i["d"])(e.target.value,this.mergedOptions);this.updateValue(t)},updateValue(e){this.$vueNumberFormatOptions&&"v2"===this.$vueNumberFormatOptions.vueVersion?this.$emit("input",e):this.$emit("update:value",e)}}},s=n("6b0d"),f=n.n(s);const p=f()(c,[["render",u]]);t["a"]=p},"8bbf":function(t,n){t.exports=e},b635:function(e,t,n){"use strict";(function(e){var r=n("7fb5"),o=n("ffd9"),u=n("025e");const i=(e,t)=>{if(i.installed)return;i.installed=!0,e.component("VueNumberFormat",r["a"]);const n=Object.assign({},o["a"],t);"undefined"!=typeof e.prototype?(n.vueVersion="v2",e.prototype.$vueNumberFormatOptions=n):(n.vueVersion="v3",e.config.globalProperties.$vueNumberFormatOptions=n),e.mixin({methods:{vueNumberFormat(e,t=n){const r=Object.assign({},n,t);return Object(u["a"])(e,r)},vueNumberUnformat(e,t=n){const r=Object.assign({},n,t);return Object(u["d"])(e,r)}}})};Object.assign(r["a"],{install:i,format:u["a"],unformat:u["d"]});let a=null;"undefined"!==typeof window?a=window.Vue:"undefined"!==typeof e&&(a=e.Vue),a&&a.use(r["a"]),t["a"]=r["a"]}).call(this,n("c8ba"))},c8ba:function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(r){"object"===typeof window&&(n=window)}e.exports=n},fb15:function(e,t,n){"use strict";if(n.r(t),"undefined"!==typeof window){var r=window.document.currentScript,o=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);o&&(n.p=o[1])}var u=n("b635");t["default"]=u["a"]},ffd9:function(e,t,n){"use strict";t["a"]={prefix:"R$ ",suffix:"",decimal:",",thousand:".",precision:2,acceptNegative:!0,isInteger:!1}}})})); </script> </code></pre> </answer> </body></html>
在此输入图片描述移动端h5页面，ios 17+中视频画面显示有问题。有人遇到过这种情况吗？宽度和高度...