<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.red{
color: red;
}
.green{
color: green;
}
</style>
</head>
<body>
<div id="app">
<h2>v-pre</h2>
<h2 v-pre="msg">{{msg}}</h2>
<h2 v-once>{{msg}} v-once 不能改变</h2>
<input type="text" v-model="msg"><br>
<em>{{msg}}</em>
<h2>v-bind</h2>
<h2 v-bind:class="g">V-bind demo</h2>
<h2 v-bind:class="{red:off}">接收判断条件</h2>
<h2 v-bind:class="{r,g}">{r:r, red:red}</h2>
<h2 :class="[r,g]">绑定数组</h2>
<h2 :class="off ? 'red':'green'">三元表达式</h2>
<!--把数据插入到APP作用域下，需要用到插值符号{{ }} ${变量}-->
<h2>得分:{{num}}</h2>
<button v-on:click="jia">加一分</button><br>
<button @click="jian">减一分</button><br>
<input v-on:keyup.13="onEnter" value="回车键"/>
<input v-on:keyup.enter="onEnter" value="回车键"/>
{{msg}}
<h2 v-text="vText"></h2>
<h2 v-text="vText2"></h2>
<h2 v-html="vText2"></h2>
<h2 v-show="isShow">{{vText2}}</h2>
<hr>
<h2>v-if 没有dom</h2>
<div v-if="isLogin">请输入你的用户名</div>
<div v-else="isLogin">用户名:姚辉乾</div>
<hr>
<h2>v-for循环</h2>
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
<hr>
<h2>显示前三行</h2>
<ul>
<li v-for="(item,index) in arr" :key="index" v-if="index<3"> {{index}}+++{{item}}</li>
</ul>
<h2>循环显示对象</h2>
<ul>
<li v-for="(item,index) in uesr" :key="index" v-if="index<3"> {{index}}+++{{item.name}}+++{{item.age}}</li>
</ul>
<hr>
<ul>
<li v-for="(value,key,index) in uesra" >
value:{{value}},
key:{{key}},
index:{{index}}
</li>
</ul>
<h2>循环sortArr
</h2>
<ul>
<li v-for="site in sortArr">{{site}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
// MVVM
new Vue({
el:"#app",
data:{ //请求过来的数据，都会放到data里面
msg:'helloworld',
r:'red',
g:'green',
off:false,
vText:'姚辉乾',
vText2:'<em>姚辉乾</em>',
isShow:true ,
isLogin:false ,
arr:[123,456,789,123456,789456,123123],
uesr:[
{name:'姚辉乾1',age:20},
{name:'姚辉乾2',age:21},
{name:'姚辉乾3',age:22},
{name:'姚辉乾4',age:23}
],
uesra:{
name:'追梦',
age:'222',
home:'菏泽'
},
num:0
},
computed:{//计算属性，实时更改 用js的sort排序
sortArr:function(){
console.log("yhq")
console.log(this.arr)
return this.arr.sort(function(a,b){
// return a-b;//从小到大
return b-a;//从小到大
})
}
},
methods:{
jia() {
this.num++;
},
jian() {
this.num--;
},
onEnter(){
this.num++;
}
}
});
</script>
</body>
</html>
vue 指令全集
猜你喜欢
转载自blog.csdn.net/qq_33026699/article/details/81628808
今日推荐
周排行