vue之逻辑运算

一、运费计算<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width

QQ帝国

5853人浏览 · 2018-08-20 16:42:32

QQ帝国 · 2018-08-20 16:42:32 发布

一、运费计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
            价格:<input type="text" v-model ="price" /><br>
            数量:<input type="text" v-model ="num"><br>
            运费：<p v-text="yunfei">{{yunfei}}</p>
            总金额：<p >{{sum}}</p>
    </div>
    
</body>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
           price:"",
           num:"",
           yunfei:"10",
           
        },
        computed:{
            
                sum(){
                 if(this.price*this.num<88){
                     this.yunfei = 10
                 }else{
                     this.yunfei = 0  
                 }
                 return  this.price*this.num + this.yunfei
             }
             
                  

             
        }
    })
</script>
</html>

效果如下：

二、关键字过滤

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	
	<div id="out">
		<h2>数据筛选</h2>
		<input type="text" v-model='ipt1'/>
		<ul>
			<li v-for="item in list">{{item}}</li>
		</ul>
	</div>
</body>
<script type="text/javascript">
	

	
	var vm=new Vue({
		el:"#out",
		data:{
			ipt1:'',
			arr:['苹果','葡萄','香蕉','橘子','香苹果','酸橘']
		},
		computed:{
			list(){
				
				var arr1=[]
				this.arr.map(function(item){
					if(item.indexOf(this.ipt1)!=-1){
						arr1.push(item)
					}
				}.bind(this))
				
				return arr1;
			}
		}
	})
	
	
	
</script>
</html>

效果如下：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^