VUE基本指令(v-model,v-html,v-text,v-bind,v-if,v-show,v-for,v-on:click,组件,过滤器)

双向数据绑定v-bindv-bindtitle简化写法为title设置类名 v-bindclass隐藏显示元素v-if和v-showv-for遍历数组遍历对象v-onclick 点击事件简化语法click组件私有组件过滤器全局过滤器私有过滤器路由双向数据绑定<!DOCTYPE html><html lang="en"><head><meta charset="UT

kingov

27860人浏览 · 2017-05-02 20:12:31

kingov · 2017-05-02 20:12:31 发布

双向数据绑定

<!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">
  <title>Document</title>
</head>
<body>
  

<div id="app">
  <input type="text" v-model="message">
  <h1>{{ message }}</h1>
  <h2 v-html="message"></h2>   <!--v-html相当于innerHTML-->
  <h3 v-text="message"></h3>   <!--v-text相当于innerText-->
</div>


<script src="../vue.min.js"></script>
<script>

  var vm = new Vue({
    el:'#app',
    data:{
      message:'hello world',
      
    }
  })

</script>

</body>
</html>

这里写图片描述

v-bind(v-bind:title简化写法为:title)

<!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">
  <title>Document</title>
</head>
<body>
  
<div id="app">
  <!--将变量biaoti绑定到a标签的title属性-->
  <!--将变量mytitle绑定到a标签的自定义属性data-tit上-->
  <a href="javascript:;" v-bind:title='biaoti' v-bind:data-tit='mytitle'>超链接</a>
</div>

<script src="../vue.min.js"></script>
<script>

  var vm = new Vue({
    el:'#app',
    data:{
      biaoti:'这是一个标题',
      mytitle:'我的自定义属性'
      
    }
  })

</script>

</body>
</html>

这里写图片描述

设置类名 v-bind:class

<!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">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">
  <div class="test" v-bind:class='{ clr:isClr }'>对象设置类名</div>
  <div class="test" v-bind:class='[one,two]'>数组设置类名</div>
  <div class="test" v-bind:class='[one,two,{clr:isClr}]'>对象和数组设置类名</div>
</div>

<script src="../vue.min.js"></script>
<script>

  var vm = new Vue({
    el:'#app',
    data:{
      biaoti:'这是一个标题',
      mytitle:'我的自定义属性',
      isClr:true,
      one:'oneStyle',
      two:'twoStyle'
    }
  })


</script>

</body>
</html>

这里写图片描述

隐藏/显示元素，v-if和v-show

<!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">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">
  <div class="test" v-if='isTrue'>if</div>  <!--isTrue为false则删除标签-->
  <div class="test" v-show='isTrue2'>show</div>    <!--isTrue为false则设置display:none;-->
</div>


<script src="../vue.min.js"></script>
<script>

  var vm = new Vue({
    el:'#app',
    data:{
      isTrue:true,
      isTrue2:false,
    }
  })

</script>

</body>
</html>

这里写图片描述

v-for

遍历数组

<!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">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">  
  <li class="test" v-for='(item,index) in items'> 元素:{{item}} 索引:{{index}} </li>  
</div>

<script src="../vue.min.js"></script>
<script>

  var vm = new Vue({
    el:'#app',
    data:{
      items:[1,2,3,4,5]
    }
  })

</script>

</body>
</html>

这里写图片描述

遍历对象

<!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">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">  
  <li class="test" v-for='(key,value,index) in obj'> key-{{key}} value-{{value}} index-{{index}} </li>  
</div>

<script src="../vue.min.js"></script>
<script>

  var vm = new Vue({
    el:'#app',
    data:{
      obj:{name:'tom',agee:188,addr:'usa'}
    },
  
  })

</script>

</body>
</html>

这里写图片描述

v-on:click 点击事件（简化语法@click）

<!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">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">  
  <button v-on:click="myClick">给对象添加内容</button>
  <li class="test" v-for='(key,value,index) in obj'> key-{{key}} value-{{value}} index-{{index}} </li>  
</div>

<script src="../vue.min.js"></script>
<script>

  var vm = new Vue({
    el:'#app',
    data:{
      obj:{name:'tom',agee:188,addr:'usa'}
    },
    methods:{
      myClick:function(){
        this.obj.name='jack'
        console.log( this.obj )
      }
    }
  
  })

</script>

</body>
</html>

这里写图片描述
点击按钮之后

组件

<!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">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">  
  <my-ele></my-ele>
</div>

<script src="../vue.min.js"></script>
<script>

  Vue.component( 'myEle' , {
    data:function(){
      return {
        num:0,
        arr:[1,2,3],
        str:'i am component'
      }
    },
    template:'<h1 @click="num++">我的组件 {{ arr[1] }} {{ num }}</h1>'
  })

  var vm = new Vue({
    el:'#app'
  })

</script>

</body>
</html>

这里写图片描述

私有组件

<!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">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">  
  <my-ele v-bind:mydata='num'></my-ele>
</div>

<script src="../vue.min.js"></script>
<script>

  var vm = new Vue({
    el:'#app',
    data:{
      num:200
    },
    methods:{
      btnClick:function(){
        this.num++
      }
    },
    components:{
      myEle:{
        data:function(){
          return {
            num2:10
          }
        },
        props:['mydata'],
        template:'<h1>自身的值{{ num2 }}  传来的值{{ mydata }} </h1>'
      }
    }
  })

</script>

</body>
</html>

这里写图片描述

过滤器

全局过滤器

<!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">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">  
  <div> {{ 'ABC' | toLowCase }}</div>
</div>

<script src="../vue.min.js"></script>
<script>

Vue.filter('toLowCase',function( str ){
  return str.toLowerCase();
})

var vm = new Vue({
  el:'#app'
})

</script>

</body>
</html>

这里写图片描述

私有过滤器

<!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">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">  
  <div> {{ str | lowCase }}</div>
</div>

<script src="../vue.min.js"></script>
<script>


var vm = new Vue({
  el:'#app',
  data:{
    str:'abcd'
  },
  filters:{
    lowCase:function( str ){
      return str.toUpperCase() 
    }
  }
})


</script>
</body>
</html>

这里写图片描述

路由

<!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">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">  
  <router-link to='/internationalNews'>国际新闻</router-link>
  <router-link to='/nativeNews'>国际新闻</router-link>
  <router-view></router-view>
</div>


<script src="../vue.min.js"></script>
<script src="../vue-router.min.js"></script>
<script>

var news1 = Vue.component('my-news1',{
  template:'<h1>特朗普就任美国总统</h1>'
})

var news2 = Vue.component('my-news2',{
  template:'<h1>北京房价已上天！</h1>'
})

var myroute = new VueRouter({
  routes:[
    { name:'new1' , path:'/internationalNews' , component:news1 } ,
    { name:'new2' , path:'/nativeNews' , component:news2 } ,
  ]
})

var vm = new Vue({
  el:'#app',
  router:myroute
})


</script>
</body>
</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}$/, //不连续的两位字母// /^