胡子表达式不能在vue.js中渲染
胡子表达式是指在Vue.js中使用双大括号{{}}包裹的表达式，用于在模板中渲染动态数据。然而，Vue.js中的模板语法是基于HTML的，而HTML中的大括号{{}}被用作模板引擎的语法，因此在Vue.js中无法直接渲染胡子表达式。
在Vue.js中，可以使用v-bind指令或简写的冒号语法来动态绑定数据到HTML属性或组件的props上。例如，可以使用v-bind来绑定一个变量到元素的属性上：
<div v-bind:title="myTitle"></div>在上述代码中，myTitle是一个Vue实例中的数据，通过v-bind指令将其绑定到div元素的title属性上。
如果需要在Vue.js中渲染胡子表达式，可以使用v-html指令。v-html指令会将数据作为HTML解析并渲染到模板中。但是需要注意的是，使用v-html指令时要确保数据的安全性，以避免XSS攻击。
<div v-html="myHtml"></div>在上述代码中，myHtml是一个Vue实例中的数据，通过v-html指令将其作为HTML渲染到div元素中。
总结起来，胡子表达式不能直接在Vue.js中渲染，但可以通过v-bind和v-html指令来实现类似的效果。
相关·内容
我正在开发简单的应用程序，我决定使用Laravel5.4和Vue.js。当我想要在vue.js中打印一些东西时，我使用"{{message}}“代码，如下所示。
但是它在php (Laravel)中抛出了一个异常。
在Laravel中，{{ }}也用来打印。
{{}} = <?php echo ''; ?>
有没有可能在Laravel或Vue.js中将{{}}标识符改成(())？
浏览 1提问于2017-09-26得票数 1
2回答
在我阅读完这篇文章之后，我尝试作为Vue.js中的文章，但它只是发出了错误。
<tr v-for="(data, i) in userList" :key="i">
<td>{{#data.authority==1}}Admin{{/data.authority==1}}</td>
</tr>
如果我只写{{data.authority}}，那么效果很好。
如何在Vue.js中使用if- grammar作为胡子语法？
浏览 17提问于2021-11-10得票数 1
回答已采纳
2回答
在Laravel的模板文件中，您偶尔会看到这样的情况
<span class="help-block" v-show="form.errors.has('name')">
@{{ form.errors.get('name') }}
</span>
也就是说，根据表单当前的错误有条件地切换可见/不可见的跨度。
我明白这部分
{{ form.errors.get('name') }}
它是一个Vue.js模板，将显示form.errors.get('name')返回的字
浏览 13提问于2017-06-25得票数 2
回答已采纳
我有html文档，我需要在前端(Vue.Js)进行渲染。我想要实现的是，我应该能够从我的数据库中获取html文档并在前端呈现它。任何帮助都是非常感谢的。
浏览 9提问于2019-10-23得票数 0
我正在用Vue.js中的通知来生成错误消息。
教程演示：
教程代码：
openNotificationWithType: function (type) {
openNotification({
title: 'Error',
message: 'Hello\nWorld',
type: type
})
}
在这段代码中，当我在字符串中使用\n时，它不会将它呈现给linefeed。
所以我一直在寻找如何在JS中应用linefeed，但我不能确切地回答。
我尝试了如下：
1)
message: `Hello
World`
2)
浏览 1提问于2017-10-31得票数 0
回答已采纳
我正在试用vue.js来使用表单输入来更改svg-元素，例如，一些rect的位置和一些筛选值。
下面是使用两个范围输入的示例的一部分。请参见，位置没有出现任何问题:在更改输入滑块后，rect示例的y坐标(ypos)被正确更新。
然而，模糊过滤器没有响应。虽然数字从输入范围得到更新到dom-元素，但标记似乎被转换为小写(std偏差)，之后我的浏览器(chrome)似乎忽略了它。
我怎么才能解决这个问题？谢谢!
<div id='app'>
<input type='range' v-model='stdev'>
浏览 5提问于2016-02-05得票数 1
回答已采纳
1回答
在mustache.js，中
var view = {
title: "Joe",
calc: function () {
return 2 + 4;
}
};
var output = Mustache.render("{{title}} spends {{calc}}", view);
我正在寻找一种以这种方式使用Vue.js的方法，即呈现一个存储在变量中的模板，然后从返回呈现的HTML，而不需要操作DOM。
我能用Vue.js实现这一点吗？如果不能，应该使用mustache.js而不是Vue.js来实现吗？任何更好的方法的建议也将受到
浏览 2提问于2016-02-24得票数 1
回答已采纳
1回答
我刚刚学习了Vue.js，我在它的渲染中遇到了一些问题。假设我有以下代码行：
index.html
<div id="header">
<h5>{{pageName}}</h5>
<p>{{pageSubtitle}}</p>
</div>
app.js
var header = new Vue({
el: '#header',
data: {
pageName: 'CuteCat',
pageSubtitle: 'World of c
浏览 1提问于2018-01-06得票数 1
我对Vuejs很陌生。我知道如何将数据(变量)传递到组件中，但在我的代码中，我需要在模板的HTML属性中获取这些变量。
在这里，我的HTML：
<div id="activities" class="row text-center activities">
<myimage text="{{ art_text }}" type="art"></myimage>
</div>
在这里，我的Vuejs代码(分隔符更改了，因为Twig)：
<script type="
浏览 2提问于2018-03-27得票数 3
回答已采纳
3回答
我用的是虚拟路由器。
如何将值绑定到链接？
<a v-link="'people/edit/{{ item.id }}'">Edit</a>
错误：
link="'people/edit/{{ item.id}}'": attribute interpolation is not allowed in Vue.js directives and special attributes.
浏览 2提问于2016-09-25得票数 0
回答已采纳
当我运行这个：{{nextPage}}
结果
但当我提出这样的建议时：
<template>
<nav aria-label="Page navigation">
<ul class="pagination">
...
<li>
<a :href="{{nextPage}}" aria-label="Next">
<spa
浏览 1提问于2017-01-31得票数 2
回答已采纳
如何使这里的回显语句正确？当我使用Ansible debug模块时，它能够正确地得到值，但不能在shell模块中得到。
cat /data/info.txt
a:8080,b:8081,c:8082
cat /data/num
0
- hosts: dev
remote_user: root
gather_facts: false
tasks:
- name: get dir path and port info
shell: cat /data/info.txt
register: info
- name: get the
浏览 3提问于2017-09-11得票数 1
回答已采纳
我有以下最小的例子：
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
浏览 0提问于2016-11-08得票数 0
1回答
我想将道具传递到导航到的链接中：
<v-btn router :to="/main/+{{siteType}}">
export default {
props: ["siteType"]
}
如何将siteType道具传递给链接字符串？
浏览 2提问于2020-02-14得票数 0
回答已采纳
我正试图通过AJAX请求将一些items加载到我自己的API中，并使用Vue.js在我的站点上显示它们。它已经正常工作，并使用下面的代码显示图像，除了我在开发人员控制台中得到一个404错误的问题
GET http://example.com/images/%7B%7B%image_file%20%7D%7D 404 (Not Found)
在XHR请求终结之前
XHR finished loading: GET "http://example.com/api/getItems".
HTML (带有刀片语法)：
<div id="items-wrapper"
浏览 2提问于2015-08-05得票数 1
回答已采纳
我从数据库中提取记录，并将它们分配给变量$results，我试图遍历这个对象数组，但无法访问对象中的任何内容，尽管有3个对象，它只运行一次。
这是我从var_dump($results);那里得到的
array(3)
{
[3]=> object(stdClass)#261 (3) {
["id"]=> string(1) "3" ["grade"]=> string(1) "A" ["score"]=> string(2) "95" }
[2]=&g
浏览 2提问于2022-02-22得票数 1
回答已采纳
在Angular 1.2.19中，是否有用于模板的三元运算符，允许我显示变量是否为输入值，如果存在，则只显示占位符？
有点像这样：
<input type="text "{{ if phoneNumber ? "value='{{phoneNumber}}'" : "placeholder='{{ language.placeHolder}}'"}}
编辑:这是我当前的HTML：
<input type="text"name="buyPhoneNumber" id=
浏览 3提问于2015-11-03得票数 0
1回答
我有这样一个数组：
array = [0, 1, 2, 3, 4, 5, 6, 7]
和2个配置变量：
var start = 2;
var count = 3;
我想让胡子按照配置的要求渲染数组。我的模板是这样的：
{#array}
<p>{.}</p>
{/array}
我希望我的输出是这样的：
<p>2</p>
<p>3</p>
<p>4</p>
我怎样才能做到这一点？
浏览 0提问于2017-11-03得票数 0
回答已采纳
2回答
在胡子模板的呈现过程中，您可能称之为名称空间冲突，我对此有一个问题。
基本上，属性"name“需要限定为模板正在遍历的数组，而不是前一个(父)数组。
很明显，简单的解决方案是更改字段的名称，但我不想对似乎是错误的地方这样做。我是不是漏掉了什么明显的东西？
在下面的小提琴中，如果members.name未定义，则不应该在嵌套列表中呈现"name“属性的列表项。相反，它正在渲染families.name，而不应该这样做。
示例：
<ul> {{#families}} <li>{{name}} <ul>
浏览 3提问于2014-02-22得票数 0
回答已采纳
我使用10月作为我的后端，并使用Vue.js应用程序进行渲染。我的问题是，使用Builder / Richeditor保存在我的数据库中的粗体文本在我的Vue.js应用程序中不会呈现为粗体。 <p><strong>Duis convallis purus.</strong> suspendisse lobortis pharetra tempor.... Richeditor使用<strong>标记而不是<b>来保存粗体，而Vue不会使用v-html指令使用模板以这种方式呈现粗体： <div v-html="myHTM
浏览 25提问于2020-08-23得票数 0
1回答
我刚刚将Vue.js从2.5.17版本更新到了2.5.22版本，它破坏了我的一些代码：
PUG
ssh-pre(language="html-vue" v-pre).
<div v-for="i in 3" :key="i">{{ i }}</div>
在Vue版本2.5.17中，它调用了我的组件ssh-pre，现在在2.5.22版本中它不再调用了(看起来像修复，根据文档，它应该是这样的： )。
那么现在，我如何才能调用我的组件，而不需要解释胡子，也不需要在ssh-pre 中添加一个
浏览 0提问于2019-01-23得票数 0
基本上，我想把Vue和Django结合起来。我有以下模板：
<!DOCTYPE html>
<html>
<head>
<title>Django Vue</title>
</head>
<body>
{% verbatim %}
<div id="components-demo">
<button-counter></button-counter&g
浏览 0提问于2018-04-29得票数 1
回答已采纳
1回答
我有一个函数调用，它会产生一个复选框
{{checkbox "checkbox_{{id}}" }}
但你可能已经猜到了，我得到的结果是
<input type="checkbox" name="checkbox_{{id}}" id="checkbox_{{id}}">
我正在寻找它来计算函数调用中的{id}。
浏览 6提问于2014-11-12得票数 2
回答已采纳
3回答
下划线模板中的布尔检查
、、、、
为了与asp.net webforms.From兼容，我不得不替换默认的下划线、模板分隔符/内插正则表达式，我选择了类似于语法的胡子。
_.templateSettings = {
interpolate : /\{\{(.+?)\}\}/g
};
试过这个
_.template("{{if(loggedIn)Welcome {{name}}}}",{name:"James",completed:true});
但似乎这不是使用模板系统检查布尔表达式的方法(因为发生了错误)。但从医生的角度来看
以及使用<% JavaScript执行任意…代码%>
浏览 0提问于2012-05-15得票数 2
回答已采纳
我的胡子模板没有渲染，我不明白为什么不。
var output = Mustache.render('{{#languages}} {{@index}} {{locale}} {{/languages}}', '{"languages" : [ { "locale" : "english", "code" : "en" }, { "locale" : "deutsch", "code" : "de" }, { "loca
浏览 4提问于2015-03-25得票数 0
回答已采纳
1回答
众所周知，如果有多个理发师，那么理发师悖论就解决了，这样他们就可以互相刮胡子了。
此规范是一致的：
sig Man {shaves: set Man}
some sig Barber extends Man {}
fact {
Barber.shaves = {m: Man | m not in m.shaves}
}
run { } for 4
然而，以下内容虽然看起来是等价的，但仍然不一致：
sig Man {
shavedMen : set Man
}
fact {
# {barber:Man | barber.shavedMen = {m: Man |
浏览 1提问于2014-11-17得票数 0
2回答
如何在PHP中验证胡子模板字符串？例如，如果我通过
Hi {{#name}}{{name}}{{/name}}{{^name}}guest{{/name}}
验证器应该返回有效，但如果我通过
Hi {{#name}}{{name}}{{/name}}{{^name}}guest
它应该返回无效。
备注我希望完全在PHP中完成，不需要Mustache_Engine或任何其他第三方依赖。
浏览 13提问于2016-09-12得票数 1
回答已采纳
我在Vue.js中有一个组件，我在其中创建了动态模式，但我无法打开它们，我认为我做的一切都是正确的，因为我们调用函数，它以alert ()响应，但它没有打开模式
<template>
<div v-for="(index,noticia) in noticias">
<div class="col s12 m12 l12">
<div id="modal-{{noticia.id}}" class="modal" v-if="noticia.videoVa
浏览 2提问于2017-05-04得票数 2
我正在使用netbeans作为编辑，并试图通过包括在内的laracast vue视频来完成我的工作。
<script> src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"</script>
<div id="app">
<h1>
{{message}}
</h1>
</div>
var data = {message: "hi there"
浏览 0提问于2015-12-18得票数 0
回答已采纳
2回答
我在评估
我在想，随着时间的推移，它将如何工作。如果我只是构建一个巨大的对象，胡子是否足以将它转换成任何形式的HTML？
所以我的问题是。有什么胡子不能做的吗？
(我的想法是，这只是从JSON到HTML的树式转换，但我不知道如何验证这一点，也不知道如何获得足够的信心来赌它。)
进一步澄清
假设我拥有的只是一个巨大的对象，然后我在一次迭代中给出了一个胡子模板；HTML中有什么东西不能通过它的语言用胡子来表示。
浏览 8提问于2010-09-22得票数 6
回答已采纳
1回答
我把Twig和胡子加起来了。因为他们对书签使用相同的标签
{{ var }}
我换了胡子标签，就像这样
Mustache.parse(template, ['${', '}']);
所以我在胡子上用了这个书签
${ var }
也没有冲突。当我需要告诉小胡子不要转义HTML时，问题就出来了。正如所说，我要用
{{{ do_not_escape_this_var }}}
但这会导致和Twig的冲突！而且似乎没有办法定制它。
我知道我可以覆盖Twig的书签，但是这对使用Twig默认标记的前端团队是不好的。
有什么解决办法吗？谢谢
浏览 2提问于2018-01-11得票数 1
回答已采纳
我正在使用CLNDR.js插件来创建一个不错的迷你日历。我需要能够在event函数中访问day函数中的值。让我试着解释如下：
这是我填充日历的JS代码。您将在我的JSON中看到，我正试图向属性数组中添加一个class: 'bank-holiday'。
<script>
var clndr = {};
$( function() {
var currentMonth = moment().format('YYYY-MM');
var nextMonth = moment().add(1,'
浏览 6提问于2016-04-20得票数 0
回答已采纳
我使用显示一些绑定变量。我页面的骨架是
<body>
<!-- the content of the page, including an instance of the variable {{hello}} -->
<script src="vue.js"></script>
<script src="myscript.js"></script>
</body>
打开页面时，页面显示{{hello}}的时间很短，在此之后，将立即替换为变量hello的正确值。
什么是正确的方法(
浏览 1提问于2017-04-03得票数 2
回答已采纳
我对这些新的网络技术非常缺乏经验。我很难与AngularJS特别是让它在手机上渲染。我想将Vue.js与一些jQuery移动元素一起使用。是否有可能将这些框架混在一起？
浏览 2提问于2016-12-14得票数 1
回答已采纳
1回答
我试图在我的haml模板中输出一个下划线模板变量，但是我没有任何运气。
HTML没有被转义，所以我似乎不明白为什么下划线变量没有呈现。
HAML -全模板
%script{:type => "text/template", :id => "user_list_template"}
%h4 Users
#test
%table.table.table-bordered
%thead
%tr
%th #
%th Name
%th Nickname
%th
浏览 0提问于2013-01-17得票数 0
我正在学习vujs，并在筛选器和日期比较中被困在自己的例子中。我在第二行中有两个类似的字符串(日期为'2020-02-02')，我应该看到‘今天’这个词，但它不起作用。
为什么在模板中的typeof上，我的日期过滤器是数字？
比较那些日期我做错了什么？永远都是false。
下面可以看到的代码或
html：
<div id="app">
<div v-for="item in info">
<div>
<!-- I compare 2 dates as strings, and
浏览 6提问于2020-02-02得票数 0
回答已采纳
1回答
我对胡子很陌生:在我的公司里，我们用胡子来渲染占位符。我已经阅读了和其他一些教程中的手册，但是没有发现任何帮助我在某些url中检测占位符的东西。
示例://工作流/v 99/历史/{ espisodeId }}
EpisodeId是一个占位符，用户将其放入存储在数据库中的URL中。
我需要能够从数据库中获取这个url，并能够检测它是否作为占位符，以及它们位于URL中的位置。我可以把网址平分.但是如何检测它是否有有胡子的占位符呢？
谢谢你能帮我。
浏览 3提问于2022-10-06得票数 -1
回答已采纳
我想知道为什么这个模型不一致？我们可以在shaves中使用以下元组。
shaves = {(man,man)} sig Man {shaves: set Man} one sig Barber extends Man {}
fact {
Barber.shaves = (m:Man |m not in m.shaves}
}
Barber.shaves将生成0个元组。在这种情况下，事实应该是有效的。那么为什么allow告诉我我的模型不一致呢？
会非常感谢你对此的一些建议。
浏览 0提问于2012-11-21得票数 3
回答已采纳
在Vue.js中，当某些数据发生更改时，组件确实会重新呈现(更新)。有时重新渲染的频率太高了，我想找出哪些数据的更改导致了这种重新渲染。如何找出导致重新渲染的更改数据？
浏览 2提问于2018-05-29得票数 7
我希望在nunjucks中有条件地输出一行，但如果条件为false，则不希望有空行。
示例：
Before
{{ 'Something' if false }}
After
渲染方式如下：
Before
After
我想在不降低模板可读性的情况下删除空行。有什么好方法可以做到这一点吗？
我希望有像{{- 'Something' if false }}这样的东西，但这不起作用。
浏览 2提问于2015-07-07得票数 1
我想有这样的行为
{{md5(sha1(base64Encoding({{someValue}})))}}
{{sha1(base64Encoding({{someValue}}))}}
我能用胡子实现这种行为吗？
浏览 0提问于2015-05-04得票数 1
回答已采纳
我试图将一个小胡子模板分解成各种组件，这样我就可以重用它们，并通过node.js返回组装好的文本。我找不到这样做的人。
我可以返回“必须疼痛”页面的暗示：
function index(request, response, next) {
var stream = mu.compileAndRender('index.mu',
{name: "Me"}
);
util.pump(stream, response);
}
我只是想不出如何呈现一个模板并在另一个模板中使用它。我试着像这样单独渲染它：
function
浏览 0提问于2012-05-22得票数 0
回答已采纳
我认为Mustache很棒，因为它允许使用partials，而且与Smarty相比，它也相对轻量级。我使用Mustache的想法是:定义一组构成UI库的部分参数。在这些部分中传递数据并使用它们，就像在类固醇上使用html元素一样。
部分元素的一个例子是列表元素(视觉上)。从标记的角度来看，该元素被定义为一个20行的HTML块。我想在循环中使用这个部分，或者我可能想独立使用它。
如果我想构建一个包含所提到的部分的列表，我会这样做：
{{#my_list_elems}}
... Maybe some HTML code
{{> my_partial
{{/my_list_elems}}
浏览 1提问于2012-10-04得票数 2
回答已采纳
1回答
以下是我的自定义指令：
angular
.module('accountApp')
.directive('uniqueRecord', function($q, $timeout, $http) {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$asyncValidators.uniqueRecord = function(m
浏览 5提问于2017-03-06得票数 0
回答已采纳
我有下面的HTML和Vue语法：
<select id='select-id' >
<option selected disabled value=''>Select Option</option>
<option v-for="(value, key) in object">{{ key }} - {{ value}}</option>
</select>
这将使用对象的键:值对中的选项来构建我的选择。但是，我希望将键赋值为选项值：
<select id=&#
浏览 0提问于2018-10-17得票数 1
回答已采纳
1回答
在胡子中转义模板
、、
我基本上是新的渲染模板使用胡子。我正在尝试将一个胡子文件呈现为html。在这种情况下，我必须逃避某些模板。
对于eg.in，我有胡子文件：
<div class="xyz">{{template}}</div>
在html中，我需要转义这个&呈现如下所示：
<div class="xyz">{{template}}</div>
我尝试过几种方法，比如使用分隔符，没有运气！所以，如果你能引导我，最好的方法是什么？！
浏览 4提问于2015-07-28得票数 0
回答已采纳
1回答
我的代码有点小问题，需要一些建议。
我试着用Vue.js模拟一个diceroll。为了确保任何diceroll都是不同的，我想为它创建一个组件。我在我的app.js中使用了这个代码
Vue.component('diceroll', {
template: 'This is the result !' + diceroll,
data: function() {
return {
diceroll: 0
}
},
methods: function(){
diceroll: Math.floor(Math.r
浏览 3提问于2015-06-24得票数 0
3回答
我使用脊骨的下划线模板引擎与胡子格式模式。
我已经成功地在项目的其他地方使用了它，但现在我第一次使用从胡子到填充模板的循环列表模式，这个模板正在抛出一个我有点困惑的错误。铬中的错误是：
"Uncaught SyntaxError: Unexpected token ILLEGAL"
并指出反跟踪中下划线的模板函数，这是非常无用的，但是在firebug中，我得到了一个更有用的错误，如：
建议哈希符号'#‘是一个问题，因为我知道胡子工作正常，因为这个项目还有很多其他部分都在使用它，这也是我第一次在我的templates.It中使用散列sybol看起来像一个问题，要
浏览 3提问于2012-01-25得票数 6
回答已采纳
我正在用Angular 7开发一个页面，我想在确定页面重新渲染后做一些事情(滚动到部分)。我想要滚动到的部分最初是用ngif隐藏的，当该部分在DOM中显示并完全呈现时，我想滚动到它。我以前用过Vue.js和他们的回调函数nextTick，它一直在工作，但我在angular中找不到类似的解决方案。我不想使用setTimeout，因为如果设置为0，DOM并不总是准备好并重新呈现，设置得更高会导致延迟。
浏览 292提问于2019-03-13得票数 10
我需要在页面上呈现多个文本项目，方法是将它们分组为几个块。要将项目分组到块中，我需要确定每个文本项的行数，以计算每个块可以占用多少项。在渲染之前，我也知道eack块的精确宽度，但我不知道每个文本项的高度。
在呈现之前，我如何计算每个文本项的行数，才能知道其中多少行可以放在一个块中？
以前，我们使用画布测量每个项目的文本，并借助measureText()方法计算行数。但是我们发现画布不知道单词的属性，在呈现项目的文本时，我们不会破坏单词。因此，画布计算2行，而不是3行等等。计算是错误的。
在Vue.js或vanilla渲染之前，是否有另一种测量文本行数的方法？
浏览 10提问于2022-01-14得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
