当前位置：首页 > news >正文

（03）Vue的常用指令

news 来源：原创 2025/4/20 6:06:56

文章目录

第3章 Vue的常用指令
- 3.1 v-text与v-html
- 3.2 v-for
- 3.3 v-if与v-show
- 3.4 MVVM双向绑定
- - 3.4.1 v-bind
  - 3.4.2 v-model

第3章 Vue的常用指令

3.1 v-text与v-html

v-text：不会渲染字符串里面的HTML内容
v-html：会渲染字符串里面的HTML内容

<body style="height: 1000px;">
<div id="box"><div v-text="txt"></div><div v-html="txt"></div></div><script type="text/javascript">new Vue({el: "#box",data: {txt: "<h1>Hello</h1>"}})
</script></body>

3.2 v-for

v-for指令用于遍历使用；

<body>
<div id="box"><h3>遍历数组</h3><ul><li v-for="(city,index) in cities">{{city}}---{{index}}</li></ul><h3>遍历对象</h3><ul><li v-for="(val,key) in book">{{key}}---{{val}}</li></ul><h3>遍历对象数组</h3><ul><!-- 遍历对象数组时,需要分配:key,取一个唯一且能标识这条记录的值(id) --><li v-for="(car,index) in cars" :key="car.id"><h3>index: {{index}}</h3><p>id:{{car.id}}</p><p>brand:{{car.brand}}</p><p>name:{{car.name}}</p></li></ul></div><script type="text/javascript">new Vue({el: "#box",data: {cities: ["广州","杭州","兰州","郑州","福州"],book:{id:1,name:"《Java核心技术》",price: 28.8},cars:[{id:1,brand:"比亚迪",name:"比亚迪F3"},{id:2,brand:"五菱",name:"红菱宏光S3"},{id:3,brand:"长安",name:"长安欧尚x7"}]}})
</script></body>

3.3 v-if与v-show

v-if：根据表达式的值来决定是否渲染元素（存不存在）
v-show：是根据表达式的值来决定是否显示（display:none）

示例代码：

<body>
<div id="app"><button @click="fun1">v-if效果</button><button @click="fun2">v-show效果</button><hr><!-- v-if决定元素是否存在DOM中--><span v-if="flag_if">小灰</span><hr><!-- v-show只是给元素添加了display:none样式，元素仍然存在DOM中--><span v-show="flag_show">xiaohui</span></div><script>new Vue({el: "#app",data: {flag_if: false,flag_show: false},methods: {fun1: function() {this.flag_if = !this.flag_if;},fun2: function() {this.flag_show = !this.flag_show;}}});
</script></body>

3.4 MVVM双向绑定

双向绑定是MVVM模式中的一个重要特性，它允许数据在Model和View之间自动同步。这意味着当Model中的数据改变时，这些变化会自动反映到视图上；同样地，当用户通过视图改变了数据，这些变化也会被同步到Model中。这种机制极大地减少了手动处理数据同步的代码量，并且使得应用程序更易于维护。

3.4.1 v-bind

v-bind 指令用于动态地将属性绑定到 Vue 实例的数据。当 Vue 实例的数据发生变化时，v-bind 会自动更新绑定的属性值。但是这种绑定是单向的，即 Vue 实例中的数据发生变化后能够即使更新到UI组件上，但是当UI组件上的数据发生变化时，并不能够及时更新到Vue实例上。

它可以用来绑定任何 HTML 属性，包括 class、style 以及其他标准属性，如下：

v-bind:src 用于绑定图片的 src 属性。
v-bind:class 可以根据条件绑定类名。
v-bind:style 用于动态设置样式。

示例代码：

<body>
<div id="app"><p v-bind:title="testTitle">绑定titlte属性</p><!-- v-bind:title可以简写成:title --><p :title="testTitle" :style="testStyle">绑定title和sytle属性</p><input type="text" :value="testValue"><hr><a :href="url" v-bind::color="testColor">百度一下</a><hr><!--插入值写法--><a v-bind={href:"http://www.baidu.com?id="+id}>百度一下</a><hr>
</div><script>new Vue({el: "#app",data: {testColor: "blue",testTitle: "我是通过v-bind绑定的title",testValue: "Hello",url: "http://www.baidu.com",id: 100,// 如果存在 - 必须使用驼峰命名或者使用''testStyle:{color:'red','font-weight':200}}});
</script></body>

3.4.2 v-model

v-model指令用于将Vue中的数据与组件中的数据进行双向绑定，当Vue中的数据发生变化时，立马会渲染到组件上，当组件上的值发生变化时，会立马更新到Vue中；这使得用户输入能够直接反映到数据模型中，同时数据模型的变化也能立即反映在表单输入上。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body>
<div id="app"><input type="text" v-model:value="testValue">
</div><script>new Vue({el: "#app",data: {testValue:"aaa"}});
</script></body></html>