【vue】vue中的插值表达式&属性绑定

已于 2023-08-15 11:36:00 修改
阅读量1.1k 收藏 2
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
于 2023-08-06 17:38:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43569834/article/details/132132354
版权

1、插值表达式&属性绑定

1、插值表达式1 子组件中使用{{ msg}}插值，在<script>的export default中使用data(){return{msg:""}}传值；

2、插值表达式2 父组件中传入msg="",在子组件中使用{{ msg}}插值，在<script>的export default中使用props:{msg:String}

3、创建全局组件，在main.js文件中创建

<!--template展示给用户，相当于MVVM模式中的V-->
<template>
  <div class="first_div">
    //插值表达式
    <p>{{ message }}</p>
    //这里的参数是从父组件的template里传过来的
    <p>{{data_1}}</p>
    //v-开头的是vue中的指令，使用v-bind来绑定属性（单向绑定，只能将model中的数据传给绑定的属性）
  ），可以动态改变属性值
    <span v-bind:title="dream">学好vue不是梦！</span>
  </div>
</template>

<!--<script>模块是m和vm结合的地方-->
<script>
export default {
  name: "greeting.vue",
  //函数
  data() {
      //return返回的是一个对象，可以是后端返回的数据
    return {
      message:"这是一个插值表达式的值",
      dream:"小目标"//把这个绑定为标签属性值用到v-bind:
    }
  },
  props:{
    data_1:String
  }
}
</script>
<!--设置元素样式的模块-->
<style scoped>
.first_div p{
  color: red;
}
</style>

v-bind 缩写

<div id="app">
    	<pre><a v-bind:href="url">菜鸟教程</a></pre>

</div>
    
<script>
	new Vue({
  	el: '#app',
  	data: {
    	url: 'http://www.runoob.com'
  	}

})
</script>
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

2、v-if和v-show

v-if 和 v-show 都是 Vue.js 中用于条件性渲染元素的指令，但它们的工作原理和使用场景有所不同。

v-if：

  • v-if 是一种条件性渲染的指令，它根据表达式的真假来决定是否渲染或销毁元素。
  • 当表达式为真时，元素会被渲染到 DOM 中；当表达式为假时，元素将从 DOM 中移除。
  • 如果表达式在初始渲染时为假，元素不会被渲染。只有当表达式变为真时，元素才会被添加到 DOM 中。
  • 在切换元素的显示状态时，v-if 具有更高的切换开销，因为元素的创建和销毁涉及到 DOM 操作。

示例使用 v-if：

<template>
  <div>
    <p v-if="isVisible">This element is visible.</p>
  </div>
</template>

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

v-show：

  • v-show 也是一种条件性渲染的指令，但它不会对元素进行销毁和重新创建，而是通过控制元素的 CSS 样式来显示或隐藏元素。
  • 当表达式为真时，元素将显示；当表达式为假时，元素将被隐藏，但仍保留在 DOM 中。
  • 在切换元素的显示状态时，v-show 具有较低的切换开销，因为元素的创建和销毁不涉及 DOM 操作。

示例使用 v-show：

<template>
  <div>
    <p v-show="isVisible">This element is visible.</p>
  </div>
</template>

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

在选择使用 v-if 还是 v-show 时，我们应该考虑以下因素：

  • 如果元素的显示状态会频繁变化，且初始状态通常是隐藏的，可以考虑使用 v-show，以减少切换开销。
  • 如果元素的显示状态很少变化，或者初始状态通常是显示的，可以使用 v-if。
  • 如果在列表渲染中需要根据条件筛选要显示的项，应使用 v-if。
  • 如果只是根据条件切换元素的显示/隐藏状态，v-show 更合适。

根据我们的具体情况和需求，选择适合的指令来实现条件性渲染。

<!--    v-if 指令将根据表达式 ifgao 的值(true 或 false )来决定是否插入 p 元素,会对DOM的新建和删除操作，增加前端开销 -->
    <p v-if="ifgao">我是最帅的人～！！</p>
<!--    v-show 每次不会重新删除或者创建，只是改变了元素的可见属性display:none，一般会使用v-show而不是v-if-->
    <p v-show="ifgao">我是最帅的人～！！</p>
<!--  v-if\v-else-if\v-else的用法-->
    <p v-if="age>=70">{{username}},老人家你该休息了～</p>
    <p v-else-if="age>=18">{{username}},欢迎光临，请开始吃鸡！～</p>
    <p v-else>{{username}},小朋友，你的作业写完了吗！～</p>

data() {
  return {
    message: "这是一个插值表达式的值",
    dream: "小目标",
    ifgao:true,
    username:"帅哥",
    age:16
  }

3、v-on_element_ui

v-on 是一个用于监听 DOM 事件并执行相应处理函数的指令。Vue.js 提供了一种简单的方式来通过 v-on 在模板中绑定事件处理逻辑。

v-on 可以用于任何支持事件的 HTML 元素，比如按钮、输入框等。

Element UI 是一个基于 Vue.js 的组件库，提供了一系列的 UI 组件，可以用于快速开发美观的用户界面。在 Element UI 中，我们可以结合 v-on 指令来监听和处理组件中的事件。

以下是一个使用 Element UI 中的按钮组件以及 v-on 指令的示例：

v-on

<template>
  <div class="first_div">
<!--    v-on:可以缩写成@-->
    <p v-on:click="username='大佬们'">{{username}},我是v-on~</p>
    <p @click="username='大佬们menmen'">{{username}},我是v-on~的缩写@</p>
    <p v-on:click="changeusername">{{username}},我是v-on的函数变量~</p>
  </div>
</template>

<script>
export default {
  name: "greeting.vue",
  data() {
    return {
      message: "这是一个插值表达式的值",
      dream: "小目标",
      ifgao:true,
      username:"帅哥",
      age:16
    }
  },
  props:{
    data_1:String
  },
  methods:{
    changeusername:function (){
      this.username="dalao"
    }
  }，
  created() {
  console.log("实例创建之后，能够获取到this");
  console.log("username为：",this.username);
    },
   mounted() {
  	console.log("vue实例挂载到dom之后")
    }
}
</script>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
<template>
  <div>
    <el-button @click="handleButtonClick">Click Me</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleButtonClick() {
      // 在这里执行按钮点击时的逻辑
      console.log('Button Clicked!');
    }
  }
};
</script>

<style>
/* 可以在这里添加样式 */
</style>

4、v-for

这是一个用于循环渲染元素的指令，通常用于列表或集合的渲染。

v-for 指令可以用于在 Vue 模板中循环渲染数组或对象的内容，并且我们可以指定一个模板来定义每个循环项的渲染方式。

以下是一个使用 v-for 渲染数组的示例：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    };
  }
};
</script>

在这个示例中，我们使用 v-for 循环渲染了一个数组中的每个元素，并将每个元素的 name 属性渲染到 <li> 元素中。key 属性是必需的，它用于帮助 Vue 识别每个循环项的唯一性，以优化渲染性能。

我们可以将 v-for 用于任何支持循环渲染的元素，例如 <tr>、<div> 等。同时，我们还可以使用额外的参数来获取循环的索引、循环项、键名等信息。

<table>
<tr>
  <th v-for="(header_name,key) in project_header" v-bind:key="key">{{ header_name }}</th>
</tr>
<tr v-for="(item,key) in projects" v-bind:key="key">
  <td>{{ item.name }}</td>
  <td>{{ item.leader }}</td>
  <td>{{ item.app_name }}</td>
</tr>
</table>
</template>
<script>
export default {
  name: "projectlist",
  data(){
    return{
      project_header:["项目名称","负责人","应用名称"],
      projects:[
        {name:"吊炸天的项目",leader:"飞天小子",app_name:"很牛逼的应用"},
        {name:"非常厉害的项目",leader:"小旋风",app_name:"很神秘的应用"},
        {name:"很完美的项目",leader:"阿童木",app_name:"666的应用"}
      ]
    }
  }
}
</script>

5、单向绑定与双向绑定

5.1、v-bind:使用v-bind来单向绑定属性

用于将 HTML 元素的属性与 Vue 实例的数据单向绑定起来。通过使用 v-bind，我们可以动态地将一个属性的值绑定到 Vue 数据属性，使其在数据更新时实时更新对应的 HTML 属性。这在构建响应式 UI 时非常有用。

v-bind 的一般语法是：v-bind:attribute="expression"，其中 attribute 是要绑定的 HTML 属性，expression 是一个 Vue 数据属性或 JavaScript 表达式，它会被计算并更新到对应的属性上。

以下是一些示例，演示了 v-bind 在不同场景下的使用：

绑定元素属性

<template>
  <div>
    <a v-bind:href="link">Visit Website</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      link: 'https://www.example.com'
    };
  }
};
</script>

动态设置CSS类 

<template>
  <div v-bind:class="classObject">Dynamic Class</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isHighlighted: false
    };
  },
  computed: {
    classObject() {
      return {
        active: this.isActive,
        highlighted: this.isHighlighted
      };
    }
  }
};
</script>

<style>
.active {
  color: green;
}
.highlighted {
  background-color: yellow;
}
</style>

绑定样式属性

<template>
  <div v-bind:style="styleObject">Styled Div</div>
</template>

<script>
export default {
  data() {
    return {
      styleObject: {
        fontSize: '20px',
        color: 'blue'
      }
    };
  }
};
</script>

绑定动态值到表单元素

<template>
  <div>
    <input type="text" v-bind:value="message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

通过使用 v-bind，可以轻松地将 Vue 数据与 HTML 属性进行绑定，使我们的应用程序具有动态和交互性。 

5.2、v-model:使用v-model来双向绑定属性

在Vue.js中，v-model 是一个用于在表单元素（如输入框、复选框、单选框等）和 Vue 实例的数据之间建立双向数据绑定的指令。它使得表单元素的值与 Vue 实例的数据属性之间保持同步，当表单元素的值发生变化时，对应的数据属性也会更新，反之亦然。这可以简化数据的管理和更新，使开发过程更加方便和高效。

v-model 主要用于以下表单元素：

  • <input>：文本输入框、密码框、复选框、单选框等
  • <textarea>：多行文本输入框
  • <select>：下拉选择框

以下是 v-model 在不同类型表单元素中的使用示例：

文本输入框：

<template>
  <div>
    <input type="text" v-model="message">
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

复选框：

<template>
  <div>
    <input type="checkbox" v-model="isChecked">
    <p>isChecked: {{ isChecked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    };
  }
};
</script>

单选框：

<template>
  <div>
    <input type="radio" value="option1" v-model="selectedOption"> Option 1
    <input type="radio" value="option2" v-model="selectedOption"> Option 2
    <p>Selected Option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    };
  }
};
</script>

下拉选择框：

<template>
  <div>
    <select v-model="selectedValue">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
    </select>
    <p>Selected Value: {{ selectedValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: ''
    };
  }
};
</script>

在上述示例中，v-model 在表单元素上建立了双向数据绑定，将表单元素的值与 Vue 实例的数据属性关联起来。无论是从表单元素更改数据还是从数据更改表单元素，双向绑定都会保持同步。

如何在组件中引用

import loginNew from "@/components/loginNew";
//创建全局组件
Vue.component('login-New',loginNew);//这样就不用在父组件内导入(import)和声明（components)子组件了
然后在App.vue根组件中调用就可以了，（不需要再去导入和声明了）
<login-New></login-New>
高老庄里的高小翠
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue-基础指令和属性绑定
weixin_56464670的博客
08-31 350
v-text、v-html、v-cloak、v-bind、{{}}
Vue.js数据绑定之data属性
12-08
在Vue中，数据绑定主要通过`data`属性来实现。 **data属性**是一个非常关键的概念，它用于定义Vue实例的数据对象。你可以将数据对象声明为一个包含各种属性的对象，或者是一个返回对象的函数。如果使用函数，Vue会...
Vue----属性绑定指令
emmmm.....
04-28 1320
文章目录3.4 属性绑定指令 3.4 属性绑定指令 插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中。在vue中可以使用 v-bind:指令为元素的属性动态绑定值。简写为英文的 ：。 用法示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in
【vue】笔记三：Vue基础语法以及数据绑定
weixin_55846296的博客
05-29 2461
在Vue中，如果我们需要将一个变量绑定到视图中，并且在变量发生改变时自动更新视图，我们需要使用Vue提供的响应式数据特性。使用v-model指令实现，当视图中的数据变化时，模型中的数据也随之更新；指令是Vue中用来扩展HTML元素功能的特殊属性，通过指令我们可以动态地操作DOM，绑定事件、控制元素显示/隐藏等。v-model指令：实现表单输入元素的双向绑定，代表模板中表单控件的值与组件实例中的数据之间的关系。可以是一个变量，也可以是一个表达式，都可通过Vue的数据绑定机制进行双向数据绑定。
Vue-插值表达式、指令、属性绑定
m0_63973769的博客
08-29 443
v-html 底层 xx.innerHTML=""指令：v-text 底层为 xx.innerText=""Vue中{{}}是一种插值表达式，作为js语法的执行环境。v-pre 静默(跳过编译)
2020-12-14
hi454的博客
12-14 362
Vue 实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var vm = new Vue({ // 选项 }) 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的： 根实例 └─ TodoList ├─ TodoItem │ ├─ TodoButtonDelete │ └─ TodoButtonEdit └─ TodoListFooter
vue绑定设置属性的多种方式(5)
08-29
1. **设置属性的值**：这是最基础的绑定方式，通过双大括号`{{ }}`插值表达式来显示数据。例如： ```html ``` 在这里，`{{url}}`会根据Vue实例`c`中`data`对象的`url`属性值进行替换。 2. **v-bind指令...
vue开发教程&案例&相关项目
最新发布
06-24
- **插值表达式**：Vue中常见的数据绑定方式之一。例如，在HTML模板中使用双大括号`{{ message }}`来显示Vue实例中的`data`数据。这里的`message`是Vue实例中定义的一个数据属性。 - **条件渲染**：使用`v-if`指令...
vue.js实现插入数值与表达式的方法分析
10-18
总结来说，Vue.js提供了灵活的方式来插入和操作数值与表达式，包括纯文本插值、HTML插值以及属性绑定。通过这些方法，开发者能够构建出响应式且易于维护的用户界面。了解并熟练掌握这些技巧，对于提升Vue.js开发效率...
vue模板语法-插值详解
08-31
插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，文本插值是使用 Mustache 语法（双打括号）来实现的。例如：<span>message:{{msg}}。在上面的例子中，msg 是一个...
VUE&Element&综合案例1
08-03
同时，文章还将介绍 VUE 中的双向绑定思想、MVVM 模式、插值表达式、指令作用等重要概念。 VUE 概述 -------- VUE 是一款前端框架，旨在简化 JavaScript 代码编写。与后端框架 Mybatis 类似，VUE 也是为了简化代码...
Vue.js单向绑定和双向绑定实例分析
10-18
例如，在以下代码中，`message`是一个数据属性，`{{message}}`插值表达式在页面上显示这个属性的值。当`message`改变时，页面上的文本也会相应更新： ```html {{message}} var app = new Vue({ el: '#app', ...
一文读懂vue动态属性数据绑定（v-bind指令）
11-20
- 错误的使用方式：初学者常犯的错误是尝试在`v-bind`中嵌套使用双花括号`{{ }}`，如`v-bind:href="{{ toutiao }}"`，这是不必要的，因为`v-bind`已经处理了数据绑定，不需要再使用插值表达式。 2. **v-bind 绑定...
Vue入门之数据绑定(小结)
08-28
无论是文本插值、JavaScript表达式还是属性绑定，Vue都提供了优雅的解决方案，减少了手动操作DOM的需要，提高了开发效率。随着对Vue的深入学习，你会发现更多关于数据绑定的高级用法，如计算属性、侦听器等，这些...
详解vue的数据binding绑定原理
08-30
以下是一个简单的Vue数据绑定示例，展示了如何使用`{{}}`插值表达式进行单向数据绑定： ```html <!DOCTYPE html> <title>Vue Data Binding Example <p>{{msg}} ...
[Vue]模板语法
emmmm.....
05-07 558
1. Vue模板语法的分类 2. 插值语法 2.1 引入 2.2 插值语法实现 2.3 插值语法中书写js表达式 3. Vue指令 3.1 指令的概念 3.2 指令的分类 4. 内容渲染指令 5. 指令语法 5.1 属性绑定指令 5.1.1 引入 5.1.2 属性绑定指令逐步尝试探索实现 5.1.3 属性绑定指令中使用js表达式 5.2 数据绑定 5.2.1 单向数据绑定 5.2.2 双向数据绑定 5.2.3 双向数据绑定
141.vue-插值表达式，指令与属性绑定 Day01
qq_56008519的博客
08-29 405
这个插值表达式会有一点不好就是加载时会短暂的出现源码 比如例子 它会短暂的出现{{h1}}然后在跳转到我们想要的页面。在项目中我们常常使用的是后端发来的数据对页面进行渲染，而vue框架能够较为有效的处理较多数据。{{}}也能对对象和数组使用譬如{{obj.age}} {{arr[0]}}写在标签内 在vue框架运行时 会吧项目中的v-clock属性去掉。总之解析文本用v-text 解析html结构用v-html。v-html指令的作用：设置元素的innerHTML。{{}}视为在js环境运行。...
vue中的插值表达式和指令
weixiwo的博客
04-07 1169
3.对于循环渲染列表，直接改变数组的数据不会更新到页面上，可以直接使用push,pop,shift,unshift,splice,sort,reverse方法修改数组的内容实现页面的更新，或者修改数组对象的引用。v-for和v-if不能连用的情况，v-for的优先级会高于v-if，所以嵌套使用的话，每个v-for的渲染的列表都会执行v-if造成不必要的计算，影响整体性能，此时可以在v-for外层套一个template标签来处理v-if，或者使用computed计算属性来规避v-if。此时age会变成数组。
vue中插值语法中v-for() of 与v-for() in 遍历对象数组的异同，以及for in for of在方法中遍历对象和数组的异同
weixin_47970316的博客
12-25 6191
前端for-of for-in 遍历对象和数组的区别以及v-for-of和v-for-in遍历对象和数组的区别
vue3的插值表达式识别/n吗
09-06
### 回答1： 在Vue3中，插值表达式中的换行符（\n）会被保留并输出。这意味着如果你在插值表达式中添加了换行符，那么它们会被识别并在渲染时输出到页面中。 例如，如果你有以下代码： ``` <template> <div> {{ message }} </div> </template> <script> export default { data() { return { message: 'Hello\nWorld' } } } </script> ``` 则渲染后的结果将是： ``` <div> Hello World </div> ``` 注意，这种行为只适用于单个插值表达式中的换行符。如果你在模板中使用多个插值表达式或其他语法，则可能需要使用模板字面量或其他技术来处理多个换行符。 ### 回答2： Vue3的插值表达式仍然可以识别，与Vue2相比，在Vue3中插值表达式的语法没有发生重大变化。插值表达式可以用于将数据动态绑定到HTML模板中。 在Vue3中，插值表达式仍然使用双大括号"{{}}"来包裹表达式。在HTML模板中，可以在双大括号内部写入JavaScript表达式，用于动态生成HTML内容。Vue会根据表达式的值自动更新DOM。 例如，在Vue3的模板中可以使用插值表达式来显示一个变量的值： ```html <div> {{ message }} </div> ``` 上述代码中，双大括号中的"message"是一个变量，它会被动态地替换为其对应的值，并显示在div元素中。 同时，插值表达式也支持JavaScript表达式的使用，可以在插值表达式中进行计算或者调用方法： ```html <div> {{ count + 1 }} </div> <div> {{ getName() }} </div> ``` 上述代码中，第一个插值表达式用于计算count加1的结果，并将结果显示在div元素中。第二个插值表达式调用了一个名为getName的方法，并将其返回值显示在div元素中。 综上所述，Vue3的插值表达式仍然可以识别，并且可以通过双大括号在HTML模板中动态地绑定数据和执行JavaScript表达式。 ### 回答3： Vue 3中的插值表达式在一定程度上有所变化。与Vue 2不同，Vue 3中的插值表达式不再支持多行文本。也就是说，在插值表达式中使用/n是不会被识别和渲染的。 Vue 3的插值表达式仍然使用双大括号{{}}包裹要求处理的数据。但与Vue 2不同的是，插值表达式中不能跨越多行。如果在插值表达式中使用了/n，Vue 3会将其视为纯文本，并不会将其解析为换行符。 要在Vue 3中实现多行文本的渲染，可以使用<p>、<div>等HTML元素结构，或者使用v-html指令进行渲染。例如，可以在组件中定义一个data属性，存储包含换行符的文本，然后使用v-html指令将其渲染为HTML。 总结而言，Vue 3的插值表达式不支持识别/n，如果需要实现多行文本渲染，可以使用其他方式如HTML元素结构或者v-html指令来处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

高老庄里的高小翠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值