引入文件
<script src = "bootstrap/jquery-1.11.0.js"></script>
<script src="vue.min.js"></script>
html内容（bootstrap）
//追加输入的内容以及删除
<body>
<div class="container" id = "out">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." v-model = "kw">//输入框接受主要关键词
<span class="input-group-btn">
<button class="btn btn-danger" type="button" v-on:click = "tap()">增加</button>//点击增加事件
</span>
</div>
<div class = "container">
<div id = "container1" style = "height:50px" v-for = "(lis,i) in list"><span>{{lis}},{{i}}</span><button class = "btn-danger" v-on:click = "delet(i)">删除</button></div>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
</body>
//script内容
<script>
var vu = new Vue({
el:"#out",
data:{
kw:"",
list:[]
},
methods:{
tap:function(){
console.log("哈哈");
console.log(this.kw+"---")
this.list.push(this.kw);
},
delet:function(i){
this.list.splice(i,1);
}
}
})
</script>
//小计金额
<body>
<div id = "out">
单价<input type="text" v-model = "dj"/><br/>
数量<input type = "text" v-model = "sl"/><br/>
小计<div>{{c}}</div>
运费<div>10</div>
</div>
</body>
<script>
var ve = new Vue({
el:"#out",
data:{
dj:0,
sl:0
},
methods:{},
computed:{
c:function(){
if(this.dj*this.sl>=88){
aa = this.dj*this.sl;
}else{
aa = this.dj*this.sl+10;
}
return aa;
}
}
})
</script>
//vue过滤器
<body>
<div id="out">
<input type="text" v-model = "kw"/>
<ul v-for = "lis in fl">
<li>{{lis}}</li>
</ul>
</div>
</body>
<script>
var ve = new Vue({
el : "#out",
data:{
kw:"",
list:["橘子","香蕉","草莓","苹果"]
},
computed:{
fl:function(){
var _this = this;
var str =[]
this.list.forEach(function(item){
if(item.indexOf(_this.kw)!=-1){
str.push(item);
}
})
return str;
}
}
})
</script>
//class名
<body>
<div id="out">
<input type="text" v-model = "ipt"/>
<div :class = "{'class-a':isa,'class-b':isb}">类属性名</div>
<div :class = "classobj"></div>
<div :style = "{color:col,background:bac}">哈哈</div>
<div :style = "[sta,stb]">lala</div>
</div>
</body>
<script>
var ve=new Vue({
el:"#out",
data:{
ipt:"",
isa:false,
isb:true,
classobj:{
"class-c":"ture",
"class-d":"true"
},
col:"#f00",
bac:"#0f0",
sta:{
color:"#ff0",
background:"#000"
},
stb:{
fontSize:"30px"
}
}
})
</script>
</html>
//自定义过滤器
<body>
<div id="out">
<input type = "text" v-model = "ipt"/>
<div>{{ipt | res}}</div>
</div>
</body>
<script>
var ve = new Vue({
el:"#out",
data:{
ipt:""
},
});
Vue.filter("res",function(value){
return value.split("").reverse().join("");
})
</script>
//json获取本地数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src = "vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="out">
<button @click = "tap()">数据获取</button>
<div v-for="lis in list"><span>{{lis.age}}</span><span>{{lis.name}}</span><span>{{lis.id}}</span></div>
</div>
<script>
var vu = new Vue({
el:"#out",
data:{
list:[]
},
methods:{
tap:function(){
_this = this
axios.get('test.json')
.then(function (response) {
console.log(response.data);
_this.list=response.data
})
.catch(function (error) {
console.log(error);
});
}
}
})
</script>
</body>
</html>
//跨域请求数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src = "vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.2.1/vue-resource.min.js"></script>
</head>
<body>
<div id="out">
<input type="text" v-model = "kw"/>
<button @click = "tap()">搜索</button>
<ul v-for="lis in list">
<li>{{lis}}</li>
</ul>
</div>
</body>
<script>
var vu = new Vue({
el:"#out",
data:{
kw:"",
list:[]
},
methods:{
tap:function(){
_this = this;
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.kw,{jsonp:'cb'}).then(function(data){
console.log(data.body.s);
_this.list = data.body.s;
},function(data){
console.log(data)
})
}
}
})
</script>
</html>