gpt4 book ai didi

javascript - 动态定义页面方向 - Vue Js

转载 作者:行者123 更新时间:2023-12-02 23:27:22 24 4
gpt4 key购买 nike

我正在尝试在我的 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 warn]:不要将 Vue 安装到或 - 安装到普通元素。我怎样才能做到这一点?

最佳答案

尝试安装在 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>

关于javascript - 动态定义页面方向 - Vue Js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56680346/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com