Vue指令入门之聊聊六大常用内置指令

<p v-text="gender">性别</p>

<p>性别：{{ gender }}</p>

<p v-html="info">该内容会被覆盖</p> <!-- info可以定义为html语句 -->

<input v-bind:placeholder="tips"> <!--两种写法都可以-->
<input :placeholder="tips"> <!--两种写法都可以-->

{{ 1 + 2 }}  //一元运算
{{ ok ? 'YES' : 'NO'}}  //三元运算
{{ message.split('').reverse().join('') }}  //字符串的反转

<div :id="'list-' + id"></div>  <!--字符串和变量的拼接-->

<button v-on:click="add">+1</button> <!--两种写法都可以-->
<button @click="add">+1</button> <!--两种写法都可以-->
-----------------------------------------------------------
<script>
    //创建vue的实例对象
    const vm = new Vue({
        methods:{
            add(){
                this.count ++; //相当于vm.count ++;
            }
        }
    })
</script>

<button @click="add(1, $event)">+N</button>
------------------------------------------------------------
<script>
    //创建vue的实例对象
    const vm = new Vue({
        methods:{                    
            add(n,event){
                //修改
                this.count +=n;

                //判断
                if(this.count % 2 === 0)
                    event.target.style.color = 'red';
                else
                    event.target.style.color = '';
            }                    
        }
    })
</script>

<!--举个例子-->
<a href="http://www.baidu.com" @click.prevent="show">跳转到百度</button>

<!--举个例子-->
<!--keyup是事件名称     .esc是按键修饰符     clearInput是事件处理函数-->
<input type="text" @keyup.esc="clearInput">

<input type="text" v-model="username">

<select v-model="city">
    <option value="">请选择城市</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
</select>

<!--举个例子-->
<input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1+n2 }}</span>

<p v-show="flag">这是被 v-show 控制的元素</p>

<p v-if="flag">这是被 v-if 控制的元素</p>

<div v-if="type === 'A'">优秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>

<table>
    <thead>
        <th>索引</th>
        <th>ID</th>
        <th>姓名</th>
        <th>性别</th>
    </thead>

    <tbody>
        <!-- v-for还支持一个可选的第二个参数，即当前项的索引。语法格式为(item,index)in items -->
        <!-- 注意：item和index都是形参，可以根据需要进行重命名，如：(user,i)in userlist -->
        <!-- 注意：item和index除了可以被自己的子元素访问外，自身也可以使用 -->
        <!-- 注意：只有在需要用到索引时，才写这第二个参数 -->
        <tr v-for="(item,index) in list">
            <td>{{ index }}</td>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.gender }}</td>
       </tr>
    </tbody>
</table>
------------------------------------------------------------
<script>
    //创建vue的实例对象
    const vm = new Vue({
        data: {
            list: [
                { id: 1, name:'张三', gender:'男' },
                { id: 2, name:'李四', gender:'女' },
                { id: 3, name:'王五', gender:'男' }
            ]
        }
    })
</script>

<tr v-for="(item,index) in list" :key="item.id">