关于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>