Vue的指令

分类

• 内容渲染指令
• 属性绑定指令
• 事件绑定指令
• 双向绑定指令
• 条件渲染指令
• 列表渲染指令

内容渲染指令

插值表达式:将需要的值插入进去就可以了,不会覆盖标签内的其余内容

<div id="app">用户名是:{{ username }}</div>

const vm = new Vue({
    el:'#app',
    data:{
        username:'zhangsan'
    }
})

v-text 可以把值插入到标签里,但是会覆盖标签内的其余内容

<div v-text="app">用户名是:{{ username }}</div>

const vm = new Vue({
    el:'#app',
    data:{
        username:'zhangsan'
    }
})

v-html 适用于渲染html的元素

<div id="app" v-html="info"></div>

const vm = new Vue({
    el:'#app',
    data:{
        info:'<h4 style="color:red;font-weight:blod">我是zhangsan</h4>'
    }
})

属性绑定指令

v-bind 可以简写为’:’

<div id="app">
    <input type="text" :placeholder="tips">
    <hr>
    <div>{{ tips }}</div>
</div>

const vm = new Vue({
    el:"#app",
    data:{
        tips:'我是张三'
    }
})

事件绑定指令

v-on 可以简写为@

<div id="app">
    <p>count的值是:{{ count }}</p>
    <!-- add或者sub后面加上小括号就可以传值 -->
    <button @click="add">+1</button>
    <button @click="sub">-1<button>
</div>

const vm = new Vue({
    el:"#app",
    data:{
        count:0
    },
    // 定义事件处理函数
    methods:{
        add(){
            this.count +=1
        },
        sub(){
            this.count -=1
        }
    }
})

双向绑定指令

v-model 只能和input,textarea,select一起使用

<div id="app">
    <p>用户名是:{{ username }}</p>
    <input type="text" v-model="username">
</div>

const vm = new Vue({
    el:"#app",
    data:{
        username:'zhangsan'
    }
})

条件渲染指令

v-if 如果不符合条件,会把该标签删除,之后符合条件就会复原.
v-show 如果不符合条件,会把标签的display改为none,否则就为block.控制display

<div id="app">
			<!-- v-if是直接删除元素来隐藏元素 -->
			<p v-if="flag">这是被v-if控制的元素</p>
			<!-- v-show是控制display来隐藏元素的 -->
			<p v-show="flag">这是被v-show控制的元素</p>
			<hr>
			<div v-if="type==='A'">优秀</div>
			<div v-else-if="type==='B'">良好</div>
			<div v-else-if="type==='C'">一般</div>
</div>

const vm = new Vue({
				el:'#app',
				data:{
					flag: true,
					type: 'A'
				}
			})

列表渲染指令

v-for 官方规定:使用v-for都必须有一个:key的属性

<div id="#app">
    <table>
        <thead>
            <th>索引</th>
            <th>ID</th>
            <th>名字</th>
        <thead>
            <tbody>
                <tr v-for="(item,index) in li" :key="item.id" :title="item.name">
                    <td>{{ index }}</td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                </tr>
            </tbody>
    </table>
</div>

const vm = new Vue({
    el:"#app",
    data:{
        li:[
            {id:1,name:'zs'},
            {id:2,name:'ls'},
            {id:3,name:'ww'}
        ]
    }
})