Looking at this simple hello world html page(看看这个简单的Hello World HTML页面)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Hello World</title>
</head>
<body>
<div id="app">
Message is {{ message }}
</div>
<script>
new Vue({
el: "#app",
data: {
message: "Hello World!"
}
})
</script>
</body>
</html>
When served as a static page it will show the Message is Hello World!
(当用作静态页面时,它将显示Message is Hello World!
) text on the page.(页面上的文字。) If I add a render
function to the Vue declaration(如果我将render
函数添加到Vue声明中)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Hello World</title>
</head>
<body>
<div id="app">
Message is {{ message }}
</div>
<script>
new Vue({
el: "#app",
data: {
message: "Hello World!"
},
render: function (h) {
return h("p", "Rendered " + this.message);
}
})
</script>
</body>
</html>
It will show Rendered Hello World!
(它将显示“已Rendered Hello World!
) inside a <p>
element, erasing whatever was present inside the <div>
element.(在<p>
元素内,删除<div>
元素内的所有内容。) Now my question is, what if I want the render function to perform the default rendering under certain conditions, ie.(现在我的问题是,如果我想让render函数在某些条件下执行默认渲染,即。) show the Message is Hello World!
(显示Message is Hello World!
) text?(文本?) Something like(就像是)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Hello World</title>
</head>
<body>
<div id="app">
Message is {{ message }}
</div>
<script>
new Vue({
el: "#app",
data: {
message: "Hello World!"
},
render: function (h) {
if (this.message === "Hello World!") {
/* do something to make the render function fallback to default rendering? */
} else {
return h("p", "Rendered " + this.message);
}
}
})
</script>
</body>
</html>
I'm aware that I can achieve this kind of effects in different ways , I'm just wondering if it's possible to tell Vue to revert back to the default fallback rendering mechanism inside the render function, or not?(我知道我可以通过不同的方式来实现这种效果 ,我只是想知道是否有可能告诉Vue恢复到render函数内部的默认回退渲染机制?)
====== EDIT ======(======编辑======)
Just to clarify some more, I'm NOT looking for solutions like this(为了澄清更多,我不是在寻找这样的解决方案)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Hello World</title>
</head>
<body>
<div id="app">
Message is {{ message }}
</div>
<script>
new Vue({
el: "#app",
data: {
message: "Hello World!"
},
render: function (h) {
if (this.message === "Hello World!") {
return h("p", "Message is " + this.message);
} else {
return h("p", "Rendered " + this.message);
}
}
})
</script>
</body>
</html>
I'm wondering if somehow you can halt the render function without returning any rendered content and make Vue to show the default rendering like there's no render function declared at all.(我想知道是否可以以某种方式停止渲染功能而不返回任何渲染内容并使Vue显示默认渲染,就像根本没有声明任何渲染功能一样。)
ask by hellopeach translate from so
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…