动态定义页面方向 - Vue Js
Posted
技术标签:
【中文标题】动态定义页面方向 - Vue Js【英文标题】：Defining page direction dynamically - Vue Js 【发布时间】：2019-11-02 22:36:12 【问题描述】：我正在尝试在我的 Vue js 项目中动态设置页面方向（RTL 或 LTR）。
但是，如果我尝试动态设置，例如使用名为方向的变量，则不会发生任何事情（它保持标准值，LTR 值）：
<html lang="en" v-bind:dir="direction" id="example-1">
<head>
<title>Page Title</title>
</head>
<body>
<div>
<p>Write this text right-to-left!</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">
</script>
<script src="test.js"></script>
</body>
</html>
var test=new Vue(
el: '#example-1',
data:
counter: 0,
direction:'rtl'
,
methods:
greet: function (event)
this.direction='rtl';
);
显示以下错误， [Vue 警告]：不要将 Vue 挂载到或 - 改为挂载到普通元素。 我该怎么做？
【问题讨论】：
请发布您调用new Vue(...)的代码
var test=new Vue( el: '#example-1', data: counter: 0, direction:'rtl' , methods: greet: function (event) this.方向='rtl'; );
【参考方案1】：
尝试安装在 div 而不是 html 元素中。并使用 CSS direction
<html lang="en">
<head>
<title>Page Title</title>
</head>
<body>
<div v-bind:style="direction" id="example-1">
<p>Write this text right-to-left!</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">
</script>
<script src="test.js"></script>
</body>
</html>
【讨论】：
【参考方案2】：就像@Steven Spungin 指出的那样，您应该将您的 Vue 应用安装在 div 而不是 html 元素中。
然后您可以在这样的函数中动态处理页面方向：
...
methods:
...
setPageDirection(dir)
document.body.style.direction = dir
...
...
您可以在此线程上找到更多设置页面方向的方法：Direction rtl to all page
【讨论】：
以上是关于动态定义页面方向 - Vue Js的主要内容，如果未能解决你的问题，请参考以下文章
vue动态添加路由，跳转页面时，页面报错路由重复：vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: {
vue动态添加路由，跳转页面时，页面报错路由重复：vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: {