-
v-text:设置标签的文本值(V-text="数据属性名" 或者使用 {{}} )
v-text会将标签的文本值替换掉 而 {{}}不会
<div id="app"> <h3 V-text="message"></h3> <h3>{{info}}</h3> </div> <script src="js/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { message: "你好!", info: "hi 你好啊" } }) </script>
-
v-html:设置标签的innerHTML
与V-text不同的是如果内容中有html结构会被解析成标签,V-text只会解析成文本
<div id="app"> V-text: <h1 V-text="text"></h1> V-html: <h1 V-html="text"></h1> </div> <script src="js/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { text: "<a href='#'>a标签</a>" } }) </script>
-
v-on:为元素绑定事件
时间名不用写on
指令可简写为@
绑定的方法定义在methods属性中
方法内部可以使用this.属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <button v-on:click="click">click</button> <input type="submit" value="dblclick" v-on:dblclick="dblclick"> <input type="submit" value="onmouserover"> <!-- 简写 --> <br><br> <button @click="click">单击事件</button> <input type="submit" value="双击事件dblclick" @dblclick="dblclick"> </div> <script src="js/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { message: "hello" }, methods: { click: function() { alert("我是click") }, dblclick: function() { alert(this.message + " 我是dblclick") }, } }) </script> </body> </html>
Vue内容绑定、事件绑定
案例1:计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
min-height: 100vh;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
#app {
display: flex;
}
button {
width: 150px;
height: 80px;
font-size: 1.8rem;
color: rgb(153, 0, 0);
border: 0px;
background-color: rgb(194, 194, 194);
}
.button1 {
border-radius: 10px 0px 0px 10px;
/* box-shadow: 0px 5px 5px 0px gray; */
}
.button2 {
border-radius: 0px 10px 10px 0px;
/* box-shadow: 0px 5px 5px 0px gray; */
}
span {
display: block;
width: 150px;
height: 80px;
background-color: white;
border-bottom: 1px solid rgb(226, 226, 226);
border-top: 1px solid rgb(226, 226, 226);
text-align: center;
line-height: 80px;
font-size: 2.3rem;
}
</style>
</head>
<body>
<div id="app">
<button class="button1" @click="sub">-</button>
<span>{{num}}</span>
<button class="button2" @click="add">+</button>
</div>
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
add: function() {
this.num += 1;
},
sub: function() {
if (this.num <= 0) {
alert("不能小于0")
} else {
this.num -= 1;
}
}
}
})
</script>
</body>
</html>