Menu
I use VueJS 2 to render and calculate form items. Now I need to show a number if a propertie is under 10, and I need show a text message if the propertie is over or equal 10.
I use this code:
Vue.component('mycomponent', { template: '#mytemp', data: function() { // ... }, computed: { mycomputedprop: function() { if (this.model_a < 10) { return '<span class="numbervalue">' + this.model_a + '€</span>'; } else { return '<span class="textvalue">I\'ll contact you as soon as possible!</span>'; } } } }); I use this code to show the value:
<div id="app"> {{ mycomputedprop }} </div> The problem is: if I show this value it shows the HTML code as text, not as HTML. How can I show the returned value as a HTML code?
710
The Basics of Vue Reactivity Simply put, a computed property's dependencies are the reactive values that help the property that determine the value that is returned. If none of these change, then, again, the cached value will be returned. If no reactive dependency is changed, a computed property is not recalculated.
You can even watch other computed props, as well as reactive data in data() ! Computed properties are required to be pure functions. This means that they return a new value, but aren't allowed to change anything, and they must be synchronous.
The simplest way to get started with Vue is to grab the development version script for it and add it to the head tag of your HTML file. Then you can start Vue code inside the HTML file inside of script tags. And have the Vue code connect up with an existing element on your HTML page.
In Vue. js, computed properties enable you to create a property that can be used to modify, manipulate, and display data within your components in a readable and efficient manner. You can use computed properties to calculate and display values based on a value or set of values in the data model.
You could use v-html
Document : Raw-HTML
<div id="app"> <div v-html="mycomputedprop"></div> </div> The contents of this div will be replaced with the value of the rawHtml property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition.
Vue 3 Example:
const RenderHtmlApp = { data() { return { rawHtml: '<span style="color: red">This should be red.</span>' } } } Vue.createApp(RenderHtmlApp).mount('#example1')<script src="https://unpkg.com/vue@next"></script> <div id="example1"> <p>Using mustaches: {{ rawHtml }}</p> <p>Using v-html directive: <span v-html="rawHtml"></span></p> </div>Assuming that modal_a is defined in the data of your component, why not handle this within the component template?
<div id="app"> <span v-if="model_a < 10" class="numbervalue">{{model_a}} €</span> <span v-else class="textvalue">I\'ll contact you as soon as possible!</span> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
