vue2.0 之文本渲染-v-html、v-text
阿新 • • 發佈：2017-06-25
mic fun .cn data itl con body meta doctype
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