——资源来自黑马程序员)
v-text
<h1 v-text="message" ></h1>
或直接 <h1{
{
message}></h1>
对应script中
<script>
el:"#app",
data:{
message:"hello world"
}
</script>
v-html
v-html和v-text作为普通文本时效果一样
但html在非文本时会出现不同如下：
<h1 v-text="message" ></h1>
<h1 v-html="message" ></h1>
v-text会把<a href="www.baidu.com">百度</a>直接输出
但v-html会输出百度的超链接格式
对应script中
<script>
el:"#app",
data:{
message:<a href="www.baidu.com">百度</a>
}
</script>
v-on
v-on用于设置动态事件
<input type="button" v-on:click="change" >
<input type="button" @click="change" >
对应script中
<script>
el:"#app",
methods:{
change:function(){
alert("!!!");
}
}
</script>
@keyup.enter=""
enter可以换成任何一个键位代表敲击键位弹起后运行函数
v-show
v-show用于设置内容是隐藏还是现实，值为true是显示，false是隐藏
可以设置一个按钮，设置v-on函数为change，点击后修改v-show的值
<input type="button" @click="change">
<img v=show="isshow" src="./img/x.jpg">
<script>
el:"#app",
data:{
isshow:false
},
methods:{
change:function(){
this.isshow=!this.isshow
}
}
</script>
v-if
v-if 根据表达式真假切换元素的显示和隐藏
一般与v-show一致
v-show 是修饰样式只控制display
v-if 修改dom树
频繁操作的元素用v-show,使用较少的用v-if
v-bind
v-bind设置元素属性，绑定属性
<img v-bind:src="./img/x.jpg">
或<img :src="./img/x.jpg">
<img :class = "{active:isActive}">
<img :class = "isActive?'active':''">
v-for
根据数据形成列表对象
<input type="button" @click="add">
<ul>
<li v-for="(item,index) in arr">
{
{
item}}
</li>
</ul>
<p v-for="item in arr2">
{
{
item.name}}
</p>
<script>
el:"#app",
data:{
arr:["1","2","3"],
arr2:[
{
name:"a"},
{
name:"b"}
]
},
methods:{
add:function(){
this.arr2.push({
name:"c"});
}
}
</script>
v-model
获取、设置表单元素的值
<div id="app">
<input type="text" v-model="message">
<p>{
{
message}}</p>
</div>
<script>
el:"#app",
data:{
message:"hello world"
}
</script>
在页面上对text框的内容修改，会同步修改p标签里的内容，双向绑定