v-text
- 作用:渲染文本到标签上,跟JQuery的text()方法类似
- 直接上例子:
<script>
var app = new Vue({
el: "#app",
data:{
name:"张三先生",
age: 30
}
});
</script>
<div id="app">
<h4>{{name}}</h4>
<h4 v-text="name"></h4>
<h4 v-text="name+',你好!'"></h4>
</div>
结果如下:
v-html
- 作用:渲染html代码到标签内容,跟JQuery的html()方法类似
var app = new Vue({
el: "#app",
data:{
name:"<span style='color:red;'>张三先生</span>"
}
});
<div id="app">
<p v-html="name"></p>
</div>
运行后就会输出红色字体的张三先生
,这里就不贴图了
v-on
- 作用:绑定dom元素各种事件,例如点击、双击等等。事件方法写在methods对象内部。
- 传参:vue的事件不需要传递参数,直接在事件内部操作data对象就行了
- v-on事件可以简写为@
<div id="app">
<input type="button" value="提示" v-on:click="test" />
<input type="button" value="简写" @click="test" />
<p>
{{message}}
<input type="button" value="点击改变内容" @click="changeData" />
</p>
</div>
<script>
var app = new Vue({
el: "#app",
data:{
message:"今天天气不错"
},
methods:{
test:function(){
alert("这是一个提示信息!");
},
changeData:function(){
this.message = "突然就下雨了";
}
}
});
</script>
v-show
- 作用:根据表达式的返回值true/false,控制元素的显示和隐藏
- 原理:通过设置css的display属性来切换显示、隐藏
<div id="app">
<input type="button" value="切换" @click="change" /> <br />
<img src="https://cn.vuejs.org/images/logo.png" v-show="isShow" />
</div>
<script>
var app = new Vue({
el: "#app",
data:{
isShow: true
},
methods:{
change:function(){
this.isShow = !this.isShow;
}
}
});
</script>
v-if
- 作用:和v-show一样,根据表达式的返回值true/false,控制元素的显示和隐藏
- 原理:通过操作dom的添加、移除来控制显示状态,注意当隐藏时整个dom元素都会被删除,这点和v-show是不同的。
v-bind
- 作用:为元素绑定属性值,例如src、title、class
- 写法是
v-bind:属性名=""
,可以简写为:属性名=""
<div id="app">
<!--以下2种写法作用相同-->
<p v-bind:class="isActive ? 'active' : ''">这是一段文本</p>
<p v-bind:class="{active: isActive}">这是一段文本</p>
<input type="button" value="切换样式" @click="changeRed" />
</div>
<style>
.active {
color:red;
}
</style>
<script>
var app = new Vue({
el: "#app",
data:{
isActive: false
},
methods:{
changeRed:function(){
this.isActive = !this.isActive;
}
}
});
</script>
v-for
- 作用:遍历数组生成对用的dom,比如用于ul-li生成、table-row生成
<div id="app">
<input type="button" value="增加" @click="add"> <br/>
<ul>
<li v-for="(item, index) in userList" :key="index">
{{index}}:{{item.name}}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app",
data:{
userList:[
{ name: "张三" },
{ name: "李四" },
{ name: "王五" }
]
},
methods:{
add:function(){
this.userList.push({ name: "宋六" });
}
}
});
</script>
v-model
- 作用:表单元素数据的绑定,注意这是
双向绑定
。意思就是,表单控件值变了,则绑定的对象也会跟着变化;如果通过代码修改了对象值,则控件值也会同步变化。 - v-model是vue业务开发的核心,涉及到页面提交的都会用到
<!--效果,文本框输入值变化,下面h4内容跟着变-->
<div id="app">
<input type="text" v-model="message" />
<h4>{{message}}</h4>
</div>
<script>
var app = new Vue({
el: "#app",
data:{
message: "今天天气真好"
}
});
</script>