2-Vue-模板语法-条件与循环-处理用户的输入

模板语法

{{}}里面写语句表达式或变量

1. v-html指令

   类似于 innerHTML(带结构) innerText(纯文本)

<div v-html="带结构的变量"> </div>

2. v-bind指令
   用于绑定状态
   状态都写在data（）{}里面

绑定titel
<h1 v-bind:title="titel">{{titel}}</h1>
绑定a标签
<a :helf="helf">baidu</a>
<h1 :title="titel">{{titel}}</h1>//简写

3. Class样式

<style>
.active{
	color:red;
}
  .text-danger{
            text-decoration: line-through;
        }
</style>
语法:
起始标签 绑定状态 class = {选择器:选择器状态}
<h1 :class="{active:isActive}">{123}</h1>//css样式变成红色
//其中isActive=true才会显示

也可以把选择器写成状态值

data(){
var app = new Vue({
    el: '#app',
    data: {
        a: "hello,word",
        title: "sajkdlsadsa",
        isActive: true,
        isDanger: true,
        style: {
            active: true,
            'text-danger':true
        }
    }
})

        <h1 :class="style">{{a}}</h1>//也能达到同样效果

还可以把选择器写成数组形式

var app = new Vue({
    el: '#app',
    data: {
        a: "hello,word",
        title: "sajkdlsadsa",
        isActive: true,
        isDanger: true,
        style: {
            active: true,
            'text-danger':true
        },
        activeClass: "active",//直接在data下面写
        dangerClass:"text-danger"
    }
})

        <h1 :class="[activeClass,dangerClass]">{{a}}</h1>//一样的效果

条件与循环

条件

 <h1 v-if="a===1" >1</h1>
        <h1 v-else-if="a===2">2</h1>
        <h1 v-else>3</h1>
        //只能选择一个展示出来,条件判断       

通过key来判断是否重用

<div v-if="isShow">账户:<input type='text'/></div>
<div v-else>密码:<input type='text'/></div>

在检测器切换isShow值输入框文本会重用

<div v-if="isShow">账户:<input key="username" type='text'/></div>
<div v-else>密码:<input key="password" type='text'/></div>

通过key来表示唯一性,控制是否重用

循环

可以迭代数组和对象还有number的值

data(){
	return{
		arr:[1,2,3]
		},
		obj:{name:"zhang3,
			age:21,
			gender:"male"
			},
		n:100
	}

数组
<ul>
   <li v-for="(item,index) in arr">{{index}}:{{item}}</li>
</ul>
对象
<ul>
   <li v-for="v,k,i in obj">{{i}}:{{k}}</li>
</ul>
number
<ul>
   <li v-for="i in n">{{i}}</li>
</ul>

处理用户的输入

通过v-model来改变状态从而改变h1内容

<h1>{{msg}}<h1>
<input type="text" v-model="msg" />