<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<!--
v-bind:color="hongse"等价于 :color="hongse"，
在html标签属性的值能写入Vue插值表达式是错误的，下面background="{{hongse}}"
这个是错误的，这个才正确 <font size="5" v-bind:color="hongse"> {{hongse}}</font>，在标签外写就对
要想在在html标签属性的值能写变量就需要用到v-bind 也就是说 :=v-bind:
<div id="Vuediv1" v-text="Vuediv" background="{{hongse}}">传智播客</div>
<div id="Vuediv2" v-html="Vuediv" background="{{green}}">传智播客</div>
-->
<div id="app">
<div id="Vuediv1" v-text="Vuediv" background="red">传智播客</div>
<div id="Vuediv2" v-html="Vuediv" background="green">传智播客</div>
<font size="5" v-bind:color="hongse"> {{hongse}}</font>
<font size="5" :color="lanse">黑马程序员</font>
<br>
<br>
<div id="ctdiv1">ctdiv1</div>
<div id="ctdiv2">ctdiv2</div>
</div>
<script>
//Vue
new Vue({
el: "#app",
data:{
Vuediv:"<h1>Hello Vuediv</h1>",
hongse:"red",
lanse:"green"
}
});
//传统JS的内容修改
window.onload = function () {
alert("innerHTML 能解析HTML标签，但innerText原样展示");
document.getElementById("ctdiv1").innerText = "<h1>Hello ctdiv1</h1>";
document.getElementById("ctdiv2").innerHTML = "<h1>Hello ctdiv2</h1>";
}
</script>
</body>
</html>
版权说明
文章采用： 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。版权声明：未标注转载均为本站原创，转载时请以链接形式注明文章出处。如有侵权、不妥之处，请联系站长删除。敬请谅解！
常见资源合集和破解 fmvvvteih...