|
1.v-text以及v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>wyb</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-text="message"></p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"前端",
},
});
</script>
</body>
</html>
<body>
<div id="app">
<p v-html="message"></p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"<a href='javascript:;'>前端</a>",
},
});
</script>
</body>
v-text和v-html作用一样，都是改变文本，最大区别在于若信息包含标签，html会解析该标签;text只会原封不动显示出来。
2.v-on
<body>
<div id="app">
<input type="button" value="按钮" v-on:click="change"/>
<p v-text="message"></p>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"前端",
},
methods:{
change:function(){
this.message="前端最棒！";
},
},
});
</script>
</body>
v-on为标签绑定事件语法是v-on:事件="函数名"，同时也可以简写为@事件="函数名"。
3.v-show和v-if
<div id="img">
<p v-show="isshow">zxy is well</p>
<p v-if="isshow">wyb is well</p>
<input type="button" @click="change" value="按钮切换状态">
<h2 v-if="temputer>40">热死了</h2>
</div>
<script>
var change = new Vue({
el:"#img",
data:{
isshow:true,
temputer:41,
},
methods:{
change:function(){
this.isshow=!this.isshow;
},
},
});
</script>
v-show和v-if都是管理显示问题，但是v-show只是改变元素的display属性值，而v-if是将整个元素进行删除和添加。所以，往往采用v-show，这样代码运行效率更高，更不费空间。
4.v-bind
<div id="bind">
<img v-bind:src="issrc" alt="" v-bind:title="istitle">
<img :src="issrc" alt="" :title="istitle" @click="isActive" :class="isactive?'active':''">
<img :src="issrc" alt="" :title="istitle" @click="isActive" :class="{active:isactive}">
</div>
<script>
var bind = new Vue({
el:"#bind",
data:{
isactive:false,
issrc:"./img/qt_4ed26836c4d25ec793e0cb8adecb619f_59589.jpg",
istitle:"前端",
},
methods:{
isActive:function(){
this.isactive=!this.isactive;
},
},
});
</script>
v-bind的作用就是对标签属性值进行修改
5.v-for
<div id="for">
<input type="button" value="添加菜品" @click="push">
<input type="button" value="删除菜品" @click="dele">
<ul>
<li v-for="(item,index) in arry">
{{ index+1 }}成都区县：{{ item }}
</li>
</ul>
<ul>
<li v-for="item in vegetable">
{{ item.name }}
</li>
</ul>
</div>
<script>
var For = new Vue({
el:"#for",
data:{
arry:["青羊","金牛","青白江","武侯"],
vegetable:[
{name:"番茄炒蛋"},
{name:"烂肉粉丝"},
{name:"清汤圆子"}],
},
methods:{
push:function(){
this.vegetable.push({name:"红烧狮子头"});
},
dele:function(){
this.vegetable.shift();
},
},
});
</script>
v-for循环遍历对象
6.v-model
<div id="form">
<input type="button" value="点击改变message值" @click="change">
<input type="text" v-model="message">
<h2>{{ message }}</h2>
</div>
<script>
var model = new Vue({
el:"#form",
data:{
message:"前端",
},
methods:{
change:function(){
this.message = "前端最棒！";
},
},
});
</script>
v-model获取表单元素的值，并且是双向数据绑定，也就是改表单的值和获取的值实时改变，改获取的值，表单的值改变。
|