Vue.js中的替代绑定语法

JavaScript

西门逆天

2020-03-13

我想知道是否有替代的语法在Vue.js中输出数据,而不是像ng-bind Angular指令这样的花括号

阅读文档后,似乎Vue.js仅接受带有v-bind指令的标记属性,但我也希望它也可以与内部html一起使用。

语境

我想使用PHP输出数据,并且一旦页面加载完毕,就可以通过Vue对其进行管理。想象下一个情况:

我们想要以下输出:

 <div>你好</ div> 

首先,我们用php输出数据

 <div> <?php echo $ hello_string?> </ div> 

之后,我们希望能够使用Vue更改内容。当前的语法是;

 <div> {{hello_string}} </ div> 

我们不能将两种语法混合使用,所以我需要这样的东西:

<!-混合vue和php的理想语法->
<div v-bind:innerhtml =“ hello_string”> <?php echo $ hello_string?> </ div> 

谢谢您的帮助。

第1463篇《Vue.js中的替代绑定语法》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
路在何方 2020.03.13

您可以使用v-text指令:

<div v-text="hello_string"></div>
<!-- same as -->
<div>{{ hello_string }}</div>

v-html

<div v-html="html"></div>
<!-- same as -->
<div>{{{ html }}}</div>

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android