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

高老庄里的高小翠

已于 2023-08-15 11:36:00 修改

阅读量1k

点赞数

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

于 2023-08-06 17:38:23 首次发布

本文链接：https://blog.csdn.net/weixin_43569834/article/details/132132354

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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】vue中的插值表达式&属性绑定

2、插值表达式2 父组件中传入msg="",在子组件中使用{{ msg}}插值，在的export default中使用props:{msg:String}1、插值表达式1 子组件中使用{{ msg}}插值，在的export default中使用data(){return{msg:""}}传值；1、在父组件中直接调用子组件的标签，是可以渲染出子组件的内容；2、如果父组件调用的子组件标签中和子组件中的插槽中都有文本内容，那么父组件中的会覆盖子组件插槽中的内容；
复制链接

扫一扫