03-Vue基础语法之指令语法与条件渲染

简介: 03-Vue基础语法之指令语法与条件渲染


昨天我们对Vue的插值语法有了初步的了解后,今天学习Vue的指令语法,让我们一起看下去吧

指令语法

1.v-bind ——强制绑定数据

特点:数据只能从data流向页面

语法:

`完整写法: <img v-bind:src="imgURL" alt="">
         简写 <img :src="imgURL" alt="">`

注意:v-bind一般用在标签属性中。这里的 v-bind: 使“ ”里的内容变为表达式

2.v-model——双向数据绑定

特点:数据不仅能从 data 流向页面,还能从页面流向 data

语法:v-mode:value="xxx" 或简写为 v-model="xxx"

注意:双向绑定能双向同步data值和页面值,它只能用在表单元素上(如: input、select等)

代码示例

<div id="app">
        <!-- //双向绑定 可用在input和textarea 中
        -->
        <!-- <input type="text" v-model="message"> -->
        <!-- <input type="text" :value="message" v-on:input="valueChange"> -->
       <input type="text" :value="message" @input="message = $event.target.value">
        <h2>{{message}}</h2>
        <textarea name="" id="one" cols="30" rows="10" v-model="message">
        </textarea>
        <p>输入的内容:{{message}}</p>
    </div>
    <script>
         /*
        v-model语法糖:
        1.v-bind绑定一个value属性
        2.v-on 指令给当前元素绑定input事件
         */
        const app =new Vue({
            el:'#app',
            data:{
                message:'你好啊'
            },
            methods:{
                valueChange(event){
                   this.message = event.target.value;
                }
            }
        })
    </script>

3.v-on——绑定事件监听

特点:绑定指定事件名的回调函数

语法:v-on:click =‘xxx’ 缩写为@

代码示例:

<div id="app">
        <h2>{{counter}}</h2>
        <h2></h2>
        <button @click="increment">+</button>
        <button  @click="decrement">-</button>
    </div>
    <script>
        /*v-on指令
        作用:绑定事件监听器
        缩写 @
        语法: Function|Inline Statement|Object
        参数: event
        */
      const app = new Vue({
        el:'#app',
        data:{
           counter:0
        },
        methods:{
            increment(){
             this.counter++
            },
            decrement(){
                this.counter--
            }
        }
      })
    </script>

v-bind和v-model的区别

Vue中的v-model和v-bind是两种不同的指令。

v-model是Vue中用于将表单元素的值绑定到Vue实例上的指令,常用于表单处理中。例如,可以使用

v-model指令将输入框、单选框、复选框等表单元素的值绑定到 Vue实例的数据上,实现双向数据绑定。

v-bind则是Vue中用于动态地绑定属性值的指令。通过v-bind指令,可以动态地将HTML元素的属性绑定到Vue实例的数据上。例如,可以使用v-bind指令将图片的src属性绑定到Vue实例的数据上,实现数据驱动的动态更新。

条件渲染指令

1.v-if指令

特点:不展示的DOM元素直接被移除。

语法:

  • v-if=" 表达式"
  • v-else-if=“表达式”
  • v-else=“表达式”
    注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。
    代码示例
<div id="app">
        <h2 v-if="score>=90">优秀  </h2>
        <h2 v-else-if="score>=80">良好  </h2>
        <h2 v-else-if="score>=60">及格 </h2>
        <h2 v-else>不及格  </h2>     
    </div>
    <script>
          const app =new Vue({
        el:'#app',
        data:{
            score:99,//可以随便改变数值
        },
        computed:{
            result(){
                let showMessage = '';
               if(this.score>=90){
                showMessage = '优秀'
               }else if(this.score>=80){
                showMessage = '良好'
               }
               return showMessage
            }
        }       
      })
       </script>

2.v-show指令

特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉

语法:v-show=“表达式”

v-show:当条件为false时,v-show只是给我们元素添加一个行内样式:display:none

代码示例:

<div id="app">
        <!-- 
            v-if: 当条件为false时,包含v-if指令的元素,压根不会有对应的元素在dom中
          但只有一次切换时选择v-if
         -->
    <h2 v-if="isShow" id="111">{{message}}</h2>
    <!-- 在需要显示与隐藏之间切换频繁时使用v-show
        v-show:当条件为false时,v-show只是给我们元素添加一个行内样式:display:none -->
    <h2 v-show="isShow" id="hhh">{{message}}</h2>
</div>
    <script  >
    const app =new Vue({
        el:'#app',
        data:{
            isShow:true,
            message:'你好啊'
        }
      })
    </script>

总结

v-if : 如果为true, 当前标签才会输出到页面

v-else: 如果为false, 当前标签才会输出到页面

v-show : 通过控制display样式来控制显示/隐藏

v-for : 遍历数组/对象

v-on : 绑定事件监听, 一般简写为@

v-bind : 强制绑定解析表达式, 可以省略v-bind

v-model : 双向数据绑定

目录
相关文章
|
9天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
10天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
9天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
9天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
JavaScript UED 前端开发
Vue1.0常用语法
var vm = new Vue({   el: "选择器", 挂载到页面的那个元素里,即确定vue的作用范围 外部可通过vm.$el访问,得到的是一个原生dom元素,可进行对应操作   a: '', //自定义属性 外部可通过vm.$options访问   data: {
3568 0
|
10天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
10天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
11天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
11天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
16天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
下一篇
无影云桌面