Question

我正在尝试在Vue js项目中动态设置页面方向（RTL或LTR）。

但是，如果我尝试动态设置（例如，使用名为direction的变量），则什么也不会发生（它保持标准值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安装到或-将其安装到普通元素。我该怎么办？

Answer 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>

Answer 2

就像@Steven Spungin所指出的那样，您应该将Vue应用安装在div中而不是html元素中。

然后，您可以使用如下功能动态处理页面方向：

def dim_image(image):
    out = np.dot(image, 0.5)
    return out

您可以找到更多方法在此线程上设置页面方向：Direction rtl to all page

动态定义页面方向-Vue Js

2 个答案: