Vue-动态绑定属性

1、v-bind基本使用

<div id="app"><img v-bind:src="url" alt="美女"><!--语法糖的写法--><a :href="aHalf">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: 'hello',url: 'https://gd4.alicdn.com/imgextra/i3/0/O1CN01A4OaL02FU0TNaOcHQ_!!0-item_pic.jpg',aHalf: 'https://www.baidu.com'}})
</script>

2、v-bind动态绑定class

  <style>.active{color: red;}</style><div id="app"><h1 :class="{active: active,line:line}">{{message}}</h1><!--也可以写个方法--><h1 :class="getClass()">{{message}}</h1><button @click="change">点击换色</button>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: 'hello',active:true,line:true},methods: {change: function (){this.active = !this.active;},getClass: function (){return {active: this.active,line: this.line}}}})
</script>

3、v-for和v-bind的结合

点击谁，谁变红色

  <style>.setRed {color: red;}</style>
<div id="app"><ul><li v-for="(item,index) in movies" :class="{setRed: index == current}" @click="setColor(index)">{{item}}</li></ul>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: 'hello',movies:['海尔兄弟','西游记','龙争虎斗个','三国演义'],current:0},methods: {setColor: function (index){this.current = index;}}})
</script>

4、v-bind绑定style

<div id="app"><h2 :style=getStyle()>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: 'hello'},methods: {getStyle: function () {return {fontSize: '50px',color: 'red'}}}})
</script>

Vue-动态绑定属性相关推荐

【Vue学习笔记_03】v-bind动态绑定属性
[Vue学习笔记_03]v-bind动态绑定属性 v-bind基本使用 v-bind动态绑定class 对象语法(很常用) 数组语法 v-bind动态绑定style 对象语法数组语法配套可执行代码 ...
Vue动态绑定class与设置style
我自己总结的 1.三元运算符实现方法一 //花括号可省略 :class="{ 类名: 条件 ? true : false }" :class="{ listItemSe ...
VUE动态绑定Css样式、Style行内样式
VUE动态绑定Css样式.Style样式一.背景这两天做的uniapp项目开发的时候遇到了动态写css样式的问题了,因为uniapp的语法是vue的语法,所以uniapp的样式问题主要也就是vue ...
vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{b:function(){ //默认调用getreturn 值}}--------------------------c ...
vue修改计算属性的值_八.Vue计算属性
Vue计算属性前言我们要做的是springboot和vue.js所做的前后端分离的hr项目,所以从来没接触到vue的小伙伴,可以这篇文章学Vue入门,这一篇就够了模板内的表达式非常便利,但是设 ...
5.Vue 计算属性和侦听器
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 5.Vue 计算属性和侦听器 ...
[vue] vue的属性名称与method的方法名称一样时会发生什么问题？
[vue] vue的属性名称与method的方法名称一样时会发生什么问题? 键名优先级:props > data > methods 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃 ...
Vue计算属性、方法、侦听器
文章目录一.基础计算模板二.计算属性computed 三.方法methods 四.侦听器watch 五.总结六.源码地址一.基础计算模板 <!DOCTYPE html> <h ...
Vue 计算属性 computed
<!--计算属性:1. 定义:要用的属性不存在,要通过已有的属性计算得来2. 原理:底层借助了 Object.defineProperty 方法提供的 getter 和 setter3. get ...
vue 动态绑定 video src，不能正常播放问题
vue 动态绑定 video src,不能正常播放问题通过 vm.$refs vm.$refs 一个对象,持有注册过 ref attribute 的所有 DOM 元素和组件实例. 核心代码 let ...

Vue-动态绑定属性

1、v-bind基本使用

2、v-bind动态绑定class

3、v-for和v-bind的结合

4、v-bind绑定style

Vue-动态绑定属性相关推荐

最新文章

热门文章