Vue （v-if,v-for,v-model）

Vue模板语法

• 双大括号：{ { }}
• v-html
• v-bind

<template>
    <div>
        <h1>学习Vue:模板语法</h1>
        <h2>{
   
   {message}}</h2>
        <div v-html="html"></div>
        <div :id="myid">v-bind修饰属性（使属性值变成动态）,它可以缩写成":"</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: "双花括号文本赋值",
                html: "<a href='https://www.csdn.net'>(v-html渲染动态标签)csdn</a>",
                myid: 1
            }
        }
    }
</script>

Vue条件渲染

• v-if
• v-else（v-if的延申指令）
• v-show

<template>
    <div>
        <div v-if="flag">v-if：条件渲染(只会在flag返回true的时候被渲染)</div>
        <div v-else="flag">v-else：条件渲染(只会在flag返回false的时候被渲染)</div>
    <!-- v-if：如果返回值为false,它不会渲染元素，而v-show:一定会渲染元素，返回值为false时只会隐藏
        所以如果需要频繁切换，一般使用v-show -->
        <div v-show="flag2">v-show：条件渲染(只会在flag2返回true的时候被渲染)</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                flag:false,
                flag2:true
            }
        }
    }
</script>

Vue列表渲染

• v-for

<template>
    <div>
        <!--     
        items：return里面定义好的数组名
        item: 数组里面的一块元素，比如：
        ‘{id: 1,name:"11"}’
         -->
         <!-- 简单的写法 -->
        <div v-for="item in items ">{
   
   {item.name}}</div>
         <!-- 规范的写法 -->
         <!-- key属性可以避免数据混乱的情况出现,提高渲染性能-->
        <div v-for="(item,index) in items " :key="item.id">{
   
   {item.name}}</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                items: [{
                        id: 1,
                        name: "11"
                    }, {
                        id: 2,
                        name: "22"
                    },
                    {
                        id: 3,
                        name: "33"
                    }
                ]
            }
        }
    }
</script>

Vue事件处理

• v-on

<template>
	<div>
		<!-- v-on一般简写成 @【一般用来监听函数触发事件】-->	
		<button v-on:click="gonum()">get</button> 
		<button @click="genum(0)">get</button> 
		{
   
   {num}}
	</div>
</template>

<script>
	export default {
		data() {
			return {
				num:0
			}
		},	
		methods:{
			gonum(){
				// “this.”用来读取data里面的值
				this.num++
			},
			//a:表示输入的参数,可以输入多个
			genum(a){
				this.num=a
			}
		}
	}
</script>

Vue表单绑定输入

• v-model
只适用于 、(选择列表)、 （多行文本输入）
表单绑定修饰符：
.lazy:在失去焦点或者回车时触发
.trim:自动过滤用户输入的首尾空格

<template>
	<div>
		<!-- v-model:双向数据绑定，即时传值 -->
		<input v-model="name" />
		<button @click="namego()">点击</button>
		<P>{
   
   {name}}</P>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				name: "输入",
			}
		},
		methods: {
			namego() {
				this.name = "no"
			}
		}
	}
</script>