如下代码是我写的vue 文本差值的代码,运行时中文乱码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style>
.profile {
display: inline-block;
width: 300px;
}
</style>
<div id="app" style="margin-left: 300px;">
<h2>文本插值</h2>
<p><label class="profile">变量:</label> {{ num }}</p>
<p><label class="profile">表达式:</label> {{ 5 + 10 }}</p>
<p><label class="profile">三目运算符:</label> {{ true ? 15 : 10 }}</p>
<p><label class="profile">函数:</label> {{ getNum() }}</p>
<p><label class="profile">匿名函数:</label> {{ (() => 5 + 10)() }}</p>
<p><label class="profile">对象:</label> {{ {num: 15} }}</p>
<p><label class="profile">函数对象:</label> {{ getNum }}</p>
<p><label class="profile">html代码(表达式):</label> {{ '<span>15</span>' }}</p>
<p><label class="profile">html代码(变量):</label> {{ html }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
data () {
return {
num: 15,
html: '<span>15</span>'
}
},
methods: {
getNum () {
return this.num
}
}
})
</script>
</body>
</html>
运行结果如图所示:
解决方法:只需在head处添加一行代码<meta charset="utf-8">即可解决
添加后的代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <style> .profile { display: inline-block; width: 300px; } </style> <div id="app" style="margin-left: 300px;"> <h2>文本插值</h2> <p><label class="profile">变量:</label> {{ num }}</p> <p><label class="profile">表达式:</label> {{ 5 + 10 }}</p> <p><label class="profile">三目运算符:</label> {{ true ? 15 : 10 }}</p> <p><label class="profile">函数:</label> {{ getNum() }}</p> <p><label class="profile">匿名函数:</label> {{ (() => 5 + 10)() }}</p> <p><label class="profile">对象:</label> {{ {num: 15} }}</p> <p><label class="profile">函数对象:</label> {{ getNum }}</p> <p><label class="profile">html代码(表达式):</label> {{ '<span>15</span>' }}</p> <p><label class="profile">html代码(变量):</label> {{ html }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> <script type="text/javascript"> let vm = new Vue({ el: '#app', data () { return { num: 15, html: '<span>15</span>' } }, methods: { getNum () { return this.num } } }) </script> </body>
此时运行结果如下:
乱码问题解决了,为了以后查看方便,写了个记录,同时,也方便有同样问题的广大读者阅读。