Vue.js(二)---相关语法介绍第二部分
-
v-text和v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-txet/v-html/v-bind</title>
<script type="text/javascript" src="js/Vue.js"></script>
</head>
<body>
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
<!-- <div id="div1"></div>
<div id="div2"></div> -->
</div>
</body>
<script>
//vue
new Vue({
el:'#app',
data:{
message:'<h1>hello vue</h1>'
}
});
//传统的innerText和innerHtml
/* window.onload=function(){
document.getElementById("div1").innerHTML="<h1>hello</h1>";
document.getElementById("div2").innerText="<h1>hello</h1>";
} */
</script>
</html>
-
v-bind绑定操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-bind</title>
<script type="text/javascript" src="js/Vue.js"></script>
</head>
<body>
<div id="app">
<font size="5" v-bind:color="ys1">百度</font>
<font size="5" v-bind:color="ys2">腾讯</font>
</div>
</body>
<script>
new Vue({
//注意差值表达式不能用于html标签的属性取值
//要想给html标签的属性设置变量的值,需要使用v-bind
el:'#app',
data:{
ys1:"red",
ys2:"yellow",
}
});
</script>
</html>