首页 > 代码库 > vue2.0 之文本渲染-v-html、v-text
vue2.0 之文本渲染-v-html、v-text
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>
页面展示
vue2.0 之文本渲染-v-html、v-text
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。