关于vue.js:P3vue3-模版语法

Attribute

Mustache 语法不能作用在 HTML attribute 上，遇到这种状况应该应用 v-bind 指令：

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

对于布尔 attribute (它们只有存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：

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

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被蕴含在渲染进去的 <button> 元素中。

JavaScript 表达式

迄今为止，在咱们的模板中，咱们始终都只绑定简略的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了齐全的 JavaScript 表达式反对。

{{number + 1}}

{{ok ? 'YES' : 'NO'}}

{{message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限度就是，每个绑定都只能蕴含单个表达式，所以上面的例子都不会失效。<!-- 这是语句，不是表达式 -->
{{var a = 1}}

<!-- 流控制也不会失效，请应用三元表达式 -->
{{if (ok) {return message} }}

v-bind 实例

<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test58}}</p>
    <p v-once>{{test57}}</p>
    <button @click="changeUname">changename</button>
    <p>{{msg}}</p>
    <p v-html="msg"> </p>
    <p v-bind:id="id">v-bind 绑定 </p>
    <img v-bind:src="url">
  </div>

</template>

<script>
  export default{data(){
      return{
        test57: '57-6666',
        test58: '58-jjjj',
        msg:"<h2> 题目 56</h2>>",
        id: "d1",
        url: "https://www.xiaohongshu.com/favicon.ico"
      }
    },
    methods:{changeUname: function (){this.test57='66666666666666'},
    },
  };
</script>

<style>
  #d1{color: red;}


</style>

<template>
  <div>
    <p>{{test57}}</p>
    <p>{{test58}}</p>
    <p v-once>{{test57}}</p>
    <button @click="changeUname">changename</button>
    <p>{{msg}}</p>
    <p v-html="msg"> </p>
    <p v-bind:id="id">v-bind 绑定 </p>
    <img v-bind:src="url" alt="">
    <button @click="changeColor">changeColor</button>
  </div>

</template>

<script>
  export default{data(){
      return{
        test57: '57-6666',
        test58: '58-jjjj',
        msg:"<h2> 题目 56</h2>>",
        id: "d1",
        url: "https://www.xiaohongshu.com/favicon.ico"
      }
    },
    methods:{changeUname: function (){this.test57='66666666666666'},
      changeColor: function (){this.id="d2"}
    },
  };
</script>

<style>
  #d1{color: red;}
  #d2{color: blue;}


</style>