vue2.0 之文本渲染-v-html、v-text
1、index.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vuedemo</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2、main.js代码
import Vue from ‘vue‘
import App from ‘./App‘
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: ‘#app‘,
render: h => h(App)
})
render: h => h(App)是ES6的语法，实际上它等同于
render: function(h) {
return h(App)
}
3、App.vue代码
<template>
<div>
<p v-text="hello"></p>
<p v-html="hello"></p>
{{ num }}<br>
{{ status ? ‘success‘ : ‘fail‘ }}
</div>
</template>
<script>
export default {
data () {
return {
hello: ‘<span>Hello World</span>‘,
num: 1,
status: true
}
}
}
</script>
<style>
html {
height: 100%;
}
</style>
页面展示
时间： 2024-12-22 02:19:26