v-test 设置标签对应的文本信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="app">
<h2 v-text="message+'!'">你好</h2>
<h2>{{message+"!"}}你好</h2>
</div>
</body>
<script>
var app=new Vue({
el:".app",
data:{
message:"Hello Vue!",
}
})
</script>
</html>
v-html 设置实现标签对应的html内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="app">
<h2 v-html="context"></h2>
<h2>{{context}}</h2>
<h2 v-text="context"></h2>
</div>
</body>
<script>
var app=new Vue({
el:".app",
data:{
context:"<a href='www.baidu.com'>Hello Vue!</a>"
}
})
</script>
</html>
v-show设置属性是否显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.46/dist/img/vuejs.png" v-show="true">
<img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.46/dist/img/vuejs.png" v-show="isShow">
<img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.46/dist/img/vuejs.png" v-show="age>=18">
<input type="button" @click="changedisplay" value="显示/隐藏"></input>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
isShow:false,
age:18
},
methods:{
changedisplay:function () {
this.isShow=!this.isShow
}
}
})
</script>
</html>
v-on 绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="app">
<input type="button" value="单击" v-on:click="doit">
<input type="button" value="单击" @click="changfood">
<input type="button" value="双击" @dblclick="doit">
<h2 @click="changfood">{{food}}</h2>
</div>
</body>
<script>
var app=new Vue({
el:".app",
data:{
food:"韭菜炒鸡蛋"
},
methods:{
doit:function(){
alert("做 it")
},
changfood:function(){
this.food+=" 好吃"
}
}
})
</script>
</html>
v-if 根据条件设置是否显示标签内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="切换显示" @click="changedisplay">
<p v-if="isShow">Hi Vue</p>
<p v-if="temperature>=35">中暑了</p>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
isShow:false,
temperature:40
},
methods:{
changedisplay:function () {
this.isShow=!this.isShow
}
}
})
</script>
</html>
v-bind 设置标签属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.active{
border:1px solid red;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc">
<img :src="imgSrc" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="changedisplay">
<img :src="imgSrc" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="changedisplay">
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
imgSrc:"https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.46/dist/img/vuejs.png",
imgTitle:"Vue",
isActive:false
},
methods:{
changedisplay:function () {
this.isActive=!this.isActive
}
}
})
</script>
</html>
v-for 对列表数据遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="app">
<ul>
<li v-for="(item,index) in arr" :title="item">
{{index}} {{item}}
</li>
</ul>
<p v-for="item in ages">{{item.age}}</p>
</div>
</body>
<script>
var app=new Vue({
el:".app",
data:{
arr:["北京","上海","广州","深圳"],
ages:[
{age:20},
{age:30}
]
}
})
</script>
</html>
v-model 双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="app">
<input type="text" v-model="message" @keyup.enter="get">
<h2>{{message}}</h2>
</div>
</body>
<script>
var app=new Vue({
el:".app",
data: {
message: "Hello Vue!",
},
methods:{
get:function ()
{
alert(this.message)
}
}
})
</script>
</html>