reason:
V-bind or ‘:’ is followed by the written JS code, which is written in the form of key value pairs. The key is the CSS style attribute name of the tag, and the key is the attribute value. The key value must be a string or a variable (provided that the variable must be declared in the data first): style = “{transform: rotate()}” this writing browser calls rotate as a function rotate(), so an error will be reported
Solution:
//String mode
:style="{transform: 'rotate(60deg)'}
//Variable form
:style="{transform: `rotate(${Variable}deg)`}
Read More:
- [Solved] Vue calls style loader error: Module build failed: CssSyntaxError
- Vue Use ‘npm run dev’ Error: Error: Unknown option ‘–inline‘ [How to Solve]
- [Solved] Error: Transform failed with 1 error: error: Invalid option in transform() call: “jsx“
- Vue Dynamic Display Picture Error 404: Not Found [How to Solve]
- [Solved] Vue Project Error: Module build failed: Error: Missing binding
- [Solved] Binding onclick event in JS: for loop: error uncaught typeerror: cannot set properties of undefined (setting ‘classname’)
- Element-plus Warning: ElementPlusError: [Util] binding value must be a string or number.
- [Solved] webpack Package Error: TypeError: this.getOptions is not a function style-loader
- CSS to achieve dynamic display of picture text by mouse touch
- [Solved] vue3vite Error: Failed to resolve import “@vue/server-renderer from “src\App.vue“. Does the file exist
- Vue-router import Dynamic Module Error [How to Solve]
- [Solved] hugo Use meme Theme Error: Error: Error building site: TOCSS: failed to transform “en/styles/main-rendered.scss“
- [Solved] Vue Error: Uncaught TypeError: Vue.createApp is not a function
- [Solved] arco design vite-plugin-style-import Load menu-item error: Internal server error…
- [Solved] Vue3 Error: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. P
- [Solved] Vue Route Error: Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_42__.defineComponent) is not a function
- [Solved] VUE D:\project\vueProject\vue-02\src\components\hello.vue 5:5 error Parsing error: x-invalid-end-tag
- Full screen scrolling by Vue + Vue awesomeswiper
- [Solved] Vue3.0 Error: The component has been registered but not used vue/no-unused-components, Close eslint
- Vue2.0: How to Use vue3 api to encapsulate Axios