【Vue 常用指令】

落雪映青衣、

已于 2022-07-24 14:11:54 修改

阅读量499

点赞数 1

分类专栏：前端文章标签： vue.js 前端 javascript

于 2022-07-22 22:17:15 首次发布

本文链接：https://blog.csdn.net/qq_41975698/article/details/125940389

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue 常用指令

Vue 常用指令有：v-text、v-html、v-bind、v-on

指令介绍

**指令：**带有v-前缀的特殊属性。
**指令的作用：**当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

v-text

v-text作用与双大花括号作用一样，将数据填充到标签中。但没有闪烁问题！（双大括号加载太慢可能会有闪烁，这时候可以使用v-text指令）

<div id="a">
    <p v-text="msg"></p>
</div>
<script>
    const Vtext = {
        data () {
            return {
                msg: "hello v-text"
            }
        }
    }
    Vue.createApp(Vtext).mount('#a')

v-html

某些情况下，从服务端请求的数据本身就是一个HTML代码，如果用双大括号会将数据解释为普通文本，而非HTML代码，为了输出真正的HTML，需要使用v-html指令：

<div id="a">
<!--    模板使用-->
    {{ msg }} <br>
<!--    v-html使用-->
    <span v-html="msg"></span>
</div>
<script>
 const Vhtml = {
     data () {
         return {
             msg: "<span style='color: aqua'>Hello v-html</span>"
         }
     }
 }
 Vue.createApp(Vhtml).mount('#a')

v-on

在前端开发中，我们经常监听用户发生的事件，例如点击、拖拽、键盘事件等。
在Vue中如何监听事件呢？使用v-on指令
示例：监听按钮的点击事件

<div id="a">
<p>点击次数: {{ msg }}</p>
    <button type="button" v-on:click="msg++">按钮</button>
</div>
<script>
const Von = {
    data () {
        return {
            msg: 0,
        }
    }
}
Vue.createApp(Von).mount('#a')

v-bind

v-bind：用于动态绑定一个或多个属性值，或者向另一个组件传递props值
应用场景：图片地址src、超链接href、动态绑定一些类、样式等等
• v-bind 指令后接收一个参数，以冒号分割。
• v-bind 指令将该元素的href 属性与表达式url 的值绑定。
绑定超链接示例：响应式地更新HTML 属性

<div id="a">
    <a v-bind:href="urls">百度</a>
</div>
<script>
const VBind = {
    data () {
        return {
            urls: "http://www.baidu.com"
        }
    }
}
Vue.createApp(VBind).mount('#a')

v-bind：绑定Class

操作元素（标签）的class 和style属性是数据绑定的一个常见需求。
例如希望动态切换class，为div显示不同背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
  <script src="https://unpkg.com/vue@next"></script>
  <style>
    .cc {
      background: blue;
      width: 200px;
      height: 200px;
    }
    .active {
      background: orange;
    }
  </style>
</head>
<body>
<div id="abc">
  <div v-bind:class="{active: isActive}" class="cc"></div>
  <button @click="btn">切换背景</button>
</div>
<script>
  const changeback = {
    data () {
      return {
        isActive: false
      }
    },methods: {
        btn() {
          if (this.isActive){
            this.isActive = false
          }else {
            this.isActive = true
          }
        }
    }
  }
  Vue.createApp(changeback).mount('#abc')
</script>
</body>
</html>

绑定Style

<div id="abc">
  <div :style="{background: background, fontSize: fontsize + 'px'}" class="test">hello world</div>
</div>
<script>
  const bindStyle = {
    data() {
      return{
        background: 'orange',
        fontsize: 30
      }
    }
  }
  Vue.createApp(bindStyle).mount('#abc')
</script>
//或者
<div id="abc">
  <div :style="StyleObj" class="test">hello world</div>
</div>
<script>
  const bindStyle = {
    data() {
      return{
        StyleObj: {
          background: 'orange',
          fontSize: '30px'
        }
      }
    }
  }
  Vue.createApp(bindStyle).mount('#abc')

v-model

Vue是数据驱动的，数据驱动有一个精髓之处是数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。
v-model指令提供表单输入绑定，可以在、及元素上创建双向数据绑定。(v-model指令其实背后本质上包含v-bind和v-on两个操作。)

示例1：
<div id="aaa">
    <input type="text" v-model="msg">
    <p>{{ msg }}</p>

</div>
<script>
const vModel = {
    data() {
        return {
            msg: '请输入内容'
        }
    }
}
Vue.createApp(vModel).mount('#aaa')
</script>

示例2：
<div id="aaa">
    <input type="radio" name="host" value="192.168.211.1" v-model="msg">host1 <br>
    <input type="radio" name="host" value="192.168.211.2" v-model="msg">host2 <br>
    <input type="radio" name="host" value="192.168.211.3" v-model="msg">host3 <br>
    <p>已选择：{{ msg }}</p>

</div>
<script>
const vModel = {
    data() {
        return {
            msg: '请输入内容'
        }
    }
}
Vue.createApp(vModel).mount('#aaa')

示例3：
<div id="aaa">
    <select v-model="msg">
        <option value="" disabled>请选择语言类型</option>
        <option value="Golang">golang</option>
        <option value="Java">java</option>
        <option value="Python">python</option>
    </select>
    <p>已选择：{{ msg }}</p>

</div>
<script>
const vModel = {
    data() {
        return {
            msg: '请输入内容'
        }
    }
}
Vue.createApp(vModel).mount('#aaa')

示例四：
<div id="aaa">
    <form action="#">
        用户名:<input type="text" v-model="form.username">
        密 码:<input type="password" v-model="form.password">
        <button @click="login">登录</button>
    </form>

</div>
<script>
const vModel = {
    data() {
        return {
            form: {
                username: '',
                password: ''
            },
            notice: ''
        }
    },methods : {
        login(){
            if (this.form.username == ''|| this.form.password == ''){
                alert('用户名或者密码不能为空')

            }else{
                console.log(this.form)
            }
        }
    }
}
Vue.createApp(vModel).mount('#aaa')
</script>