vue学习-属性监听，样式绑定v-bind

最新推荐文章于 2022-09-22 20:43:36 发布
最新推荐文章于 2022-09-22 20:43:36 发布
阅读量1.3k 收藏
点赞数
分类专栏： web前端 文章标签： vue js 前端 html watch
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012426959/article/details/85080217
版权

1.监听属性

例子1

<div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>

例子2：

<body>
      <div id = "computed_props">
         千米 : <input type = "text" v-model = "kilometers">
         米 : <input type = "text" v-model = "meters">
      </div>
	   <p id="info"></p>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = val * 1000;
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });
         // $watch 是一个实例方法
		vm.$watch('kilometers', function (newValue, oldValue) {
			// 这个回调将在 vm.kilometers 改变后调用
		    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
		})
      </script>
   </body>

2.样式绑定

Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
(1)class属性绑定：

<div v-bind:class="{ active: isActive }"></div>

也可在对象中传入更多属性用来动态切换多个 class 。

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

也可以绑定一个对象

<style>
.active {
	width: 100px;
	height: 100px;
	background: green;
}
.text-danger {
	background: red;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="classObject"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    classObject: {
      active: true,
      'text-danger': true
    }
  }
})
</script>
</body>

也可以在这里绑定返回对象的计算属性(方法)。这是一个常用且强大的模式：

new Vue({
  el: '#app',
  data: {
    isActive: true,
    error: {
      value: true,
      type: 'fatal'
    }
  },
  computed: {
    classObject: function () {
      return {
  base: true,
        active: this.isActive && !this.error.value,
        'text-danger': this.error.value && this.error.type === 'fatal',
      }
    }
  }
})

(2)数组语法
一个数组包含多个class属性

<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
</head>
<body>
<div id="app">
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>
​
<script>
new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>
</body>
</html>

也可以使用三元表达式来切换列表中的class属性

<body>
<div id="app">
    <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
</div>
​
<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>
</body>

(3)style内联样式

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

也可以直接绑定到一个对象上

<div id="app">
  <div v-bind:style="styleObject">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    styleObject: {
      color: 'green',
      fontSize: '30px'
    }
  }
})
</script>

v-bind:style 可以使用数组将多个样式对象应用到一个元素上：

<body>
<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>
​
<script>
new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'green',
      fontSize: '30px'
    },
    overridingStyles: {
      'font-weight': 'bold'
    }
  }
})
</script>
</body>

v-bind,v-model注意：
1:v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值=“表达式”
2:v-bind用于绑定属性和数据 ，其缩写为“ : ” 也就是v-bind:id === :id
3:v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。

Mustache (双大括号写法)不能在 HTML 属性中使用，应使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除：

<button v-bind:disabled="someDynamicCondition">Button</button>

参考：http://www.runoob.com/vue2/vue-class-style.html
http://www.runoob.com/vue2/vue-watch.html

25King
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 解除鼠标的监听事件的方法
01-19
描述：在移动端中，我们的首页tab会...v-click-outside=hideBox 2- script标签中 自定义指令 // 自定义指令函数 const clickOutside = { // 初始化指令 bind (el, binding, vnode) { function clickHandler (e) {
前端小记录---v-bind、计算属性与watch监听
LeslieLau的博客
09-20 554
题目是三个无关的技术，只是统一写在一块记录，进入正题。 文章目录v-bind计算属性watch监听 v-bind 这个指令可以动态修改标签内属性的值。举个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo2</title> </head> <body> <div id="a
如何监听页面元素样式的变化
比孤狼还孤独的人
07-07 1152
DOM改变时，如何做到自适应echarts图表出发点如何做到自适应总结 出发点 如何做到自适应echarts，开发两年的我一直以为，自适应只有在屏幕大小发生变化时才需要做自适应，然而最近的项目中发现，对于左侧菜单栏可以展开收缩或者拖拽改变宽度时，window screen的width并没有发生变化，自然，右侧内容区域的echarts实例也没有发生变化。 如何做到自适应 var callback = function(mutations) { mutations.map(function(mutation
Vue-数据监听-对象监听
qq_40792800的博客
01-11 3287
之前说到了Object.defineProperty() 用来监听 data 的数据改变，从而实现响应式，但是在回顾definePropety方法博客中，出现了一个问题，那就是我在 改变数据，调用 set() 函数的时候，出现了堆栈溢出的问题，这是因为出现了递归的情况。在这里我们就来看看Vue是怎么解决这个问题的。 首先，我们来实现一个简单的数据监听效果，以此来深入理解一下，Vue的数据监听是怎么做到的。 1、新建一个html文件，不需要引入Vue ，然后定义一个对象 <script&...
vue学习简记（一）监视属性、绑定样式、条件渲染、数据监视
qq_43178432的博客
07-15 414
监视属性、样式绑定、属性监视
【Vue.js】之监听实现搜索功能与翻译功能
qq_37086980的博客
01-20 359
监听器（watch） watch监听器的用法相当于是我们监视一个数据的变化，在这个数据变化时执行一些操作，这个操作可以是任何操作 声明： watch: { 要监听的属性: function (newValue, oldValue) {}, 要监听的属性: '函数名' // methods中的函数 要监听的属性: { handler (newValue, oldValue) { console.log('watch', newUser) } }
vue.js学习相关文件-测试代码
06-05
Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号。 全部的按键别名： .enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left ...
vue_note:Vue学习笔记
04-30
vue -V //显示版本 idea 需要 vue init 之后 open v-bind 简写 : v-on 简写@ v-model //双向数据绑定 计算属性 computed //一个属性是由其他属性计算来 监听器 watch 事件 methods v-if //移除 v-show //隐藏 v-for...
Vue 2.x教程之基础API
11-27
样式绑定（对象绑定、数组绑定、内联绑定） 条件绑定（v-if v-show） 列表渲染 (v-for、:key、数组监测、过滤/排序) 事件处理 (监听、修饰符、key修饰符) 表单输入绑定（text、checkbox、radio、select） 一、...
Vue.js列表渲染绑定jQuery插件的正确姿势
12-07
使用v-for绑定列表时，有时候需要绑定如select2之类的jQuery插件。 需要在Vue根据数组内容生成dom元素之后，去找到该dom元素，然后 $().xxx绑定jQuery插件。 之前使用Vue.nextTick方法，在一次dom更新以后执行延迟回...
用Vue.js实现监听属性的变化
11-26
前言 创建 Vue 实例时，Vue 将遍历 data 的属性，通过 ES5 的 Object.defineProperty 将它们转为 getter/setter，在其内部 Vue 可以追踪依赖、通知变化。 const vm = new Vue({ data: {foo: 1} // 'vm.foo' (在内部，同 'this.foo') 是响应的 }) 观察属性变化 Vue 的实例提供了 $watch 方法，用于观察属性变化。 const vm = new Vue({ data: {foo: 1} }) vm.$watch('foo', function (newValue, ol
关于Vue的一些小笔记（三）计算、监听、样式绑定
sandy_star
07-21 1579
前言：这个笔记主要内容为vue的计算属性、监听属性和样式绑定。让我们一起来看看吧！ 一、Vue的计算属性 关键词：computed。 用来处理一些复杂的逻辑，类似于在computed里面建立一个函数或方法。 （1）一个例子 假如需要反转一个字符串，我们会这么做： <div id="app"> {{message.split('').reverse().join('')}} </div> 但是如果我们要在多处反转字符串，这样写反而麻烦，不利于多次调用，也不容易看懂理解。 .
Vue组件的样式绑定和事件监听处理
thwr1881的博客
08-13 1146
Vue组件的样式绑定和事件监听处理
Vue——计算、监听属性、样式绑定、条件渲染相关笔记
Bonsoir777的博客
09-22 391
本文主要介绍vue中计算属性、条件渲染等相关知识点
通过 VUE watch监听实现中英文切换时元素样式改变
qq_42341171的博客
11-20 1879
通过 VUE watch监听实现中英文切换时元素样式改变 1.前言 1.写项目的时候遇到的问题：新写的网页有中英文切换功能，但是当我切换成英文的时候，文本如果给定宽度，那么有时候翻译成英文文本会过长导致换行，可能会将原本下面的元素往下挤，所以我想要实现如下功能：一个元素有两套样式，当我进行中英文切换的时候样式也随之进行切换。 2.实现 之前有试过通过v-bind动态绑定style或class实现样...
VUE之监听属性 watch
张晨光老师的播客
01-04 1061
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;VUE监听属性&lt;/title&gt; &lt;script src="js/vue.min.js"&gt;&lt;/script&gt; &
VUE 学习（五）监听属性watch
qq_43434300的博客
08-26 461
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue监听属性watch</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <!--监听属性 w.
02 vue3 v-for v-if v-model v-bind v-on 计算属性 监听
ZbyFt
08-31 634
v-bind v-for 的使用 v-bind 绑定信息可以简写为 “:” ，作用是绑定已有的数据例如：v-bind:key=“index” :key=“index” <template> <div> <h1>{{msg}}</h1> </div> <p>绑定对象：{{userinfo.username}}---{{userinfo.age}}</p> <p>
7.vue 侦听器和(Class 与 Style 绑定)
7TribeZ的博客
09-02 1001
计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的watch回调。细想一下这个例子： <div id="demo">{{ fullName }}</div> var vm = new Vue({ el: '#demo', data: { ...
vue v-bind 与 v-on
最新发布
01-18
Vue中的v-bind和v-on是两个常用的指令，用于属性绑定和事件绑定。 1. v-bind用于属性绑定，可以将Vue实例中的数据绑定到HTML元素的属性上。通过v-bind指令，可以动态地将Vue实例中的数据绑定到HTML元素的属性上，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值