vue不同dom元素的取值

文章目录

  • 单向绑定
      • 插值表达式
      • v-bind 给html标签的属性绑定值
        • 动态切换class 、style
  • 双向绑定 v-model

单向绑定

v-bind v-text v-htlm、插值表达式 都属于单向绑定

数据元素发生变化,页面发生变化
页面元素发生变化,数据不变
v-bind:href=“http://…”:简写 :href=“http://…”

插值表达式

只能用在标签体里面,支持vue 变量、函数,表达式
页面刷新过程中会显示原代码 {{name}}、{{age + 1}},不友好

使用方式

    <div id="app">
        {{name}} {{age + 1}}
        <h1>你好 , {{name}} </h1>
    </div>

v-bind 给html标签的属性绑定值

动态切换class 、style

<body>
    <div id="app">
        <a v-bind:href="link">绑定到属性</a>
        <span v-bind:class="{'active':isActive,'text-danger':hasError}" 
              v-bind:style="{color:color,'fontSize':size}">
              class增强,控制多个class、style
        </span>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                link: "http://www.baidu.com",
                isActive: true,
                hasError: true,
                color: 'red',
                size: '30px'
            }
        })
    </script>
</body>

class 增强语法: {class1:true,class2:false} : true false通过vue函数或者变量来控制,达到动态切换class的需求
class1 class2 名称中含有- 等特殊字符 示例:‘class-name’
style 增强语法: {color:1的值,fontSize:2的值}

双向绑定 v-model

页面元素修改值,绑定数据的值跟着修改
可以修改页面元素的:表单、自定义组件
用于给标签体绑定值

你可能感兴趣的:(前端)