在 vuejs2 中呈現動態生成的 html 模板中的綁定值
[英]Render the binding value in dynamic generated html template in vuejs2
問題描述
對於以下代碼：我希望可以使用 javascript 更改“test1 span”。 我該怎么做？ 注意： {{msg}} 可能來自 ajax 輸出。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<!-- app -->
<div id="app">
<span v-html="test"></span>
<span v-html="test1"></span>
{{test3}}
</div>
<script>
var app1 = new Vue({
el: '#app',
data: {
test: '<p style="color: red">THIS IS HTML</p>',
test1: '{{msg}}',
test3: 20,
msg: 10
}
})
function change() {
app1.msg = Math.random()
app1.test3 = Math.random()
}
setInterval(change, 2000)
</script>
</body>
</html>
修改：
也許我需要明確我的問題：
接下來修改代碼，當啟動頁面時，您會在頁面中看到Go to Foo鏈接，然后單擊該鏈接，您將看到hello {{msg}}
注意：這來自遠程服務器： b.html 。
我在那里設置了一個計時器，每 2 秒更改一次msg的值，我希望頁面中的{{msg}}可以更改為隨機數。
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<body>
<div id="app">
<p>
<router-link to="/foo">Go to Foo</router-link>
</p>
<router-view></router-view>
</div>
<script>
const Foo = {
template: '<div v-html="template1"></div>',
data: function () {
return {
template1: null
}
},
created: function () {
this.fetchData()
},
watch: {
'$route': 'fetchData'
},
methods: {
fetchData () {
var that = this
$.get("http://localhost/try/b.html", function(data, status) {
that.template1 = data
})
}
}
}
const routes = [
{ path: '/foo', component: Foo }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
function change() {
app.msg = Math.random()
}
setInterval(change, 2000)
</script>
</body>
</html>
b.html
<div>
hello
{{msg}}
</div>
3 個解決方案
解決方案1
1 2018-01-11 10:38:07
使用 Vue.js 為您提供的工具。 將change()放入 VM 的methods對象中，然后創建一個created()掛鈎來設置間隔。
請注意v-html需要一個String ，而不是Number ，所以在生成隨機數時只需添加.toString() 。
var app1 = new Vue({ el: '#app', data: { test: '<p style="color: red">THIS IS HTML</p>', test1: null, test3: 20, msg: 10 }, watch: { msg: function(newVal, oldVal) { this.test1 = newVal } }, methods: { change() { this.msg = Math.random().toString() this.test3 = Math.random() } }, created() { setInterval(this.change, 2000) } })
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> <div id="app"> <span v-html="test"></span> <span v-html="test1"></span> {{ test3 }} </div>
代替觀察者，使用計算屬性更容易。
var app1 = new Vue({ el: '#app', data: { test: '<p style="color: red">THIS IS HTML</p>', test3: 20, msg: 10 }, computed: { test1() { return this.msg.toString() } }, methods: { change() { this.msg = Math.random() this.test3 = Math.random() } }, created() { setInterval(this.change, 2000) } })
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> <div id="app"> <span v-html="test"></span> <span v-html="test1"></span> {{ test3 }} </div>
解決方案2
0 2018-01-11 10:35:13
使用 v-model 而不是 v-html :-
var app1 = new Vue({ el: '#app', data: { test: '<p style="color: red">THIS IS HTML</p>', test1: '{{msg}}', test3: 20, msg: 10 } }) function change() { app1.msg = Math.random() app1.test3 = Math.random() } setInterval(change, 2000)
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> <div id="app"> <span v-html="test"></span> <span v-model="test1">{{msg}}</span> {{test3}} </div>
解決方案3
0 已采納 2018-01-13 13:04:01
最后我從這里得到了答案
Vue.compile( 模板 )
這將使來自遠程服務器的模板再次被 vuejs 解析。
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
</head>
<body>
<div id="app">
<p>
<router-link to="/foo">Go to Foo</router-link>
</p>
<router-view></router-view>
</div>
<script>
const Foo = {
data: function () {
return {
template1: null,
msg: null
}
},
created: function () {
this.fetchData()
setInterval(this.change, 2000)
},
render: function(createElement) {
if (this.template1)
{
return this.template1();
}
},
methods: {
change() {
this.msg = Math.random()
},
fetchData () {
var that = this
$.get("http://localhost/try/b.html", function(data, status) {
that.template1 = Vue.compile(data).render
})
}
}
}
const routes = [
{ path: '/foo', component: Foo }
]
const router = new VueRouter({
routes
})
const app1 = new Vue({
router
}).$mount('#app')
</script>
</body>
</html>
b.html
<div>
hello
{{msg}}
</div>
將 JSON 對象解析為 VueJs2 中的數組，然后渲染數組以選擇選項
[英]Parse JSON objects to array in VueJs2 then render array to select options
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.