vue学习随笔01

vue中有v-if,一般v-if="true"代表要显示这个控件，v-if="false"代表不显示这个控件。

比如 <input v-if="true" type="text" />

v-else配合v-if来使用，一般都直接找挨得最近的v-if

v-show类似v-if，但是v-if="false"时候，你去看源码，根本看不到隐藏前的源码，而v-show="false"的话，只是在这个组件上加上了属性 display:none。隐藏前的源码也是能看见的。

比如 <input v-show="true" type="button" value="button"/>

v-model用于链接一个html控件value属性和<script>中的数据model

比如

<div id="app">
    <input type="text" v-model="num"/>
</div>
<script>
    var m = { num:100};
    var vm = new Vue({
        el:'#app',
        data : m,
        methods:{
            
        }
</script>

<!--下拉框-->
<div id="app">
  <select v-model="selected">
    <option value="A被选">A</option>
    <option value="B被选">B</option>
    <option value="C被选">C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
<script src="/resources/js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      selected: ''
    }
  });
</script>

　　
v-bind用于改变一个属性的值

<div class="app">
    <a v-bind:href="url">click me</a>
</div>  
<script>
var app = new Vue({
    el:'.app',
    data:{
        url:"https://www.baidu.com",
    }
});
</script>

<div class="app">
    <a v-bind:href="url" v-bind:class="klass">click me</a>
    <img v-bind:src="imgsrc">
</div>  
<script>

var app = new Vue({
    el:'.app',
    data:{
        url:"https://www.baidu.com",
        imgsrc:"https://cn.vuejs.org/images/logo.png",
        kclass:"btn btn-default"
    }
});

</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        div.red {
             50px;
            height: 50px;
            background-color: red;
        }
        div.hasBorder {
            border: 5px solid black;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="添加边框" v-on:click="func()"/>
        <div v-bind:class="{red:isRed , hasBorder:hasBorder}"></div>
    </div>
    <script>
        var m = {
            isRed:true,
            hasBorder:false
        }

        var vm = new Vue({
            el:"#app",
            data: m,
            methods:{
                func(){
                    this.hasBorder=true;
                }
            }
        })
    </script>

</body>
</html>