vue中的常用基础指令

                                                                              vue中的常用基础指令总结

1.v-text指令（内容渲染指令）

<template>
  <div>
    <h1>这个文件主要说明v-text的使用</h1>
    <p>作用:设置标签的文本内容</p>
    <p>{{msg}}</p>
    <!-- 直接设置变量,变量要先定义好 -->
    <p v-text='msg'></p>
    <p v-text='msg.toUpperCase()'></p>
    <p v-text="'我想对你说:'+msg"></p>
    <p v-text="age>=18?'成年':'未成年'"></p>
    <p v-text="msg">这里已经有内容了</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'hello',
      age: 20
    }
  }
}
</script>

<style>
</style>

2.v-html指令（内容渲染指令）

<template>
  <div>
    <h1>这个文件主要说明v-html的使用</h1>
    <p>v-html的特点:它可以解析html结构</p>
    <p>{{msg}}</p>
    <p v-text="msg"></p>
    <!-- 直接使用v-html指定数据 -->
    <p v-html="msg"></p>
    <p v-html="msg.toUpperCase()"></p>
    <p v-html="'拼个字符串'+msg.toUpperCase()"></p>
    <p v-html="age>=18?'成年':'未成年'"></p>

    <p>{{str}}</p>
    <p v-text="str"></p>
    <p v-html="str"></p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'hello',
      age: 20,
      str: '后台返回的内容<hr>'
    }
  }
}
</script>

<style>
</style>

运行结果

v-text与v-html相同点 :可以设置标签的内容，对标签之间的内容完全替换 可以拼接字符串，使用api,三元表达式

v-text与v-html区别：v-text会将内容原样输出，而v-html会对内容进行html解析，如果内容是合法的html结构，则会解析出对应的网页结构

3.v-for指令(列表渲染指令)

1:作用 基于源数据多次渲染元素或模板块,说白了，就是对数据进行动态渲染的

2.语法 

(1).遍历数组：value是数组的成员，index是数组的索引
<元素 v-for='(value,index) in 数组>{{value}}:{{index}}</元素>
(2).遍历对象：value是对象的属性值，key是对象的属性名称，index是索引(一般不用)
<元素 v-for='(value,key,index) in 对象>{{value}}:{{key}}:{{index}}</元素>

3. 使用方式：你想循环生成什么结构，就在这个结构上添加v-for

4.v-for指令的:key的作用及使用式

4.v-model：双向绑定指令

案例

<template>
  <div>
    <h1>这个文件主要说明v-model的使用</h1>
    <p>{{msg}}</p>
    <!-- 使用v-model,只支持input,select,textarea -->
    <input type="text"
           v-model.trim='msg'> <br>
    <input type="number"
           v-model.number="age">
    <p>{{age + 10}}</p>
    <p>{{msg == 'hello1'}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'hello',
      age: 20
    }
  }
}
</script>

<style>
</style>

v-model指令常用的修饰符

5.v-on：事件绑定指

 

有无参数的情况

<template>
  <div>
    <h1>这个文件主要说明v-on使用方式</h1>

    <!-- 为按钮绑定无参事件 -->
    <button v-on:click='dothis'>为按钮绑定无参事件</button>
    <!-- 为按钮绑定无参事件:简写方式 -->
    <!-- 如果需要手动传递事件对象，只能传递$event -->
    <button @click='dothis("jack",$event)'>为按钮绑定无参事件-简写</button>
  </div>
</template>

<script>
export default {
  // 方法定义在methods结构中
  methods: {
    // 如果调用处理函数时没有传递参数，则有默认的参数：事件对象
    // 如果手动传递了参数，那么默认的事件对象就不再传递了
    dothis (name, event) {
      console.log(name, event);
      console.log('为按钮绑定无参事件');
    }
  }
}
</script>

<style>
</style>

v-on绑定事件时，处理函数应该在methods中定义

v-on绑定事件时常用的事件(按键)修饰符

 

6.v-bind：属性绑定指

案例

<template>
  <div>
    <h1>这个文件主要说明动态绑定指令v-bind的使用</h1>
    <!-- 指定Src的属性值 -->
    <!-- <img :src="imgSrc"
         alt=""> -->
    <button @click="isColl=!isColl">折叠</button>
    <!-- 需求：为元素动态绑定样式 -->
    <!-- <div class="menu collopse"></div> -->
    <!-- <div :class="{'menu':true, 'collopse':isColl}"></div> -->

    <!-- 如果样式没有加引号，则认为是一个变量 -->
    <!-- <div :class="['menu',{'collopse':isColl}]"></div> -->

    <!-- 后期常见的样式续写的方式 -->
    <div class="menu"
         :class="{'collopse':isColl}"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isColl: false, // 是否折叠
      // menu: 'menu',
      imgSrc: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3302399998,3216746631&fm=26&gp=0.jpg',
    }
  }
}
</script>

<style lang="less" scoped>
.menu {
  width: 200px;
  height: 400px;
  background-color: #f00;
  transition: all 1s;
}
.collopse {
  width: 20px;
}
</style>

7.v-show：条件渲染指令

1.作用：通过为元素设置display样式实现元素的显示和隐藏

如果设置的bool值为true,就移除元素的display:none样式

如果设置的bool值为false,就为元素设置样式display:none

2.语法

<标签  v-show='bool值'></标签>，如<p v-show="ishsow">我到底能不能显示呢</p>

3.实例

<template>
  <div>
    <h1>这个文件主要说明v-show的使用</h1>
    <button @click="isshow = !isshow">控制显示和隐藏</button>
    <p v-show="isshow">能不能显示</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isshow: true
    }
  }
}
</script>

<style>
</style>

结果

8.v-if：条件渲染指令

1.作用：根据所指定的表达式的值有条件地渲染元素

如果设置的bool值为true,就创建元素并渲染

如果设置的bool值为false,就移除元素

2.语法：<标签  v-if='bool值'></标签>，如<p v-if="ishsow">我到底能不能创建并显示呢</p>

3.与之相关的v-else-if和v-else实现分支判断

实例

<template>
  <div>
    <h1>这个文件主要说明v-if的基本使用</h1>
    <button @click="iscreate=!iscreate">创建和移除</button>
    <p v-if='iscreate'>你到底要不要我</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      iscreate: true
    }
  }
}
</script>

<style>
</style>

<template>
  <div>
    <h1>v-if实现分支结构：成绩的科学计数</h1>
    <input type="number"
           v-model="score">
    <p v-if='score>=90'>A</p>
    <p v-else-if='score>=80'>B</p>
    <p v-else-if='score >= 70'>C</p>
    <p v-else-if='score>=60'>D</p>
    <p v-else>E</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      score: 60
    }
  }
}
</script>

<style>
</style>